转换div开/关屏幕

Question

我一直致力于为移动网站创建基本框架。我遇到了过渡问题。当点击菜单按钮时（网站的右上角），我有一个离屏幕div转换为在屏幕上。再次单击按钮时，它也会在屏幕外转换。只要不隐藏溢出，这样就可以正常工作。

我希望隐藏溢出，但只有在显示溢出时div才会转换。有什么想法可以解决这个问题吗？

    var clicked = false;
    
    function mobileNav() {
      var doc = document.getElementsByClassName("innerMenu")[0];
      if(clicked){
        if(doc.classList.contains("transitionIn")) {
          doc.classList.remove("transitionIn");
        }
        doc.classList.add("transitionOut");
      }
      else {
        if(doc.classList.contains("transitionOut")) {
          doc.classList.remove("transitionOut");
        }
        doc.classList.add("transitionIn");
      }
      clicked = !clicked;
    }

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    a {
      text-decoration: none;
    }
    
    /* FOR TESTING AND VISIBILITY */
    nav {
      background-color: #cacdce;
    }
    a {
      color: white;
    }
    a:hover {
      color: black;
    }
    .logo {
      background-color: white;
    }
    .jumbotron {
      background-color: orange;
    }
    .content-one-left {
      background-color: gray;
    }
    .content-one-right {
      background-color: black;
    }
    .content-two-left {
      background-color: blue;
    }
    .content-two-right {
      background-color: gray;
    }
    footer {
      background-color: #cacdce;
    }
    .fa.fa-bars {
      color: white;
    }
    .fa.fa-bars:hover {
      color: black;
    }
    
    /* MOBILE PAGE STYLING */
    
    .wrapper {
      display: grid;
      grid-template-columns: repeat(12, [col-start] 1fr);
      grid-template-rows: 1fr;
      height: 85vh;
      overflow: auto;
    }
    
    nav {
      height: 15vh;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .outerMenu {
      position: absolute;
      top: 0;
      right: 0;
      height: 15vh;
      width: 30vw;
      /* overflow: hidden; */
    }
    
    .icon {
      margin-left: 12vw;
    }
    
    .fa.fa-bars {
      margin-top: 4.5vh;
    }
    
    .innerMenu {
      position: absolute;
      top: 15vh;
      right: -30vw;
      height: 40vh;
      width: 30vw;
    
      display: flex;
      flex-direction: column;
      align-items: center;
    
      font-size: 3vh;
      
      background-color: #cacdce;
    }
    
    .innerMenu.transitionIn {
      transition: 1s;
      right: 0vw;
    }
    
    .innerMenu.transitionOut {
      transition: 1s;
      right: -30vw;
    }
    
    .innerMenu > a {
      margin: 2.5vh 0;
    }
    
    .logo {
      height: 14vh;
      width: 16vw;
      margin-left: 42vw;
    }
    
    .icon {
      font-size: 6vh;
    }
    
    .jumbotron {
      grid-column: col-start / span 12;
      height: 65vh;
    }
    
    [class$="-left"] {
      grid-column: col-start / span 12;
      height: 50vh;
    
      display: flex;
    }
    
    [class$="-right"] {
      grid-column: col-start / span 12;
      height: 50vh;
    
      display: flex;
    }
    
    footer {
      grid-column: col-start / span 12;
      height: 15vh;
    }

    <!DOCTYPE>
    
    <html>
    
    <head>
      <title>testing</title>
      <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
      <script src="js/script.js"></script>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    
    <body>
    
      <nav>
        <div class="logo">
        </div>
        <div class="outerMenu">
          <a href="#" class="icon" onclick="mobileNav()"><i class="fa fa-bars"></i></a>
          <div class="innerMenu">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Gallery</a>
            <a href="#">Testimonials</a>
            <a href="#">Contact</a>
          </div>
        </div>
      </nav>
    
      <main class="wrapper">
        <header class="jumbotron">
        </header>
    
        <section class="content-one-left">
        </section>
    
        <section class="content-one-right">
        </section>
    
        <section class="content-two-left">
        </section>
    
        <section class="content-two-right">
        </section>
    
        <footer>
        </footer>
      </main>
    
    </body>
    
    </html>

Answer 1

您可以隐藏身体x轴的滚动，然后使用javascript添加和隐藏外部菜单的滚动，将过渡css添加到内部菜单。

    var clicked = false;
    
    function mobileNav() {
      var doc = document.getElementsByClassName("innerMenu")[0];
      var outermenu = document.getElementsByClassName("outerMenu")[0];
      if(clicked){
        if(doc.classList.contains("transitionIn")) {
          doc.classList.remove("transitionIn");
        }
        doc.classList.add("transitionOut");
        setTimeout(function(){
           outermenu.style.overflow = "hidden !important";
        },1000);
      }
      else {
        if(doc.classList.contains("transitionOut")) {
          doc.classList.remove("transitionOut");
        }
        outermenu.style.overflow = "visible !important";
        doc.classList.add("transitionIn");
      }
      clicked = !clicked;
    }

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    a {
      text-decoration: none;
    }
    
    /* FOR TESTING AND VISIBILITY */
    nav {
      background-color: #cacdce;
    }
    a {
      color: white;
    }
    a:hover {
      color: black;
    }
    .logo {
      background-color: white;
    }
    .jumbotron {
      background-color: orange;
    }
    .content-one-left {
      background-color: gray;
    }
    .content-one-right {
      background-color: black;
    }
    .content-two-left {
      background-color: blue;
    }
    .content-two-right {
      background-color: gray;
    }
    footer {
      background-color: #cacdce;
    }
    .fa.fa-bars {
      color: white;
    }
    .fa.fa-bars:hover {
      color: black;
    }
    
    /* MOBILE PAGE STYLING */
    
    .wrapper {
      display: grid;
      grid-template-columns: repeat(12, [col-start] 1fr);
      grid-template-rows: 1fr;
      height: 85vh;
      overflow: auto;
    }
    
    nav {
      height: 15vh;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .outerMenu {
      position: absolute;
      top: 0;
      right: 0;
      height: 15vh;
      width: 30vw;
      /* overflow: hidden; */
    }
    
    .icon {
      margin-left: 12vw;
    }
    
    .fa.fa-bars {
      margin-top: 4.5vh;
    }
    
    .innerMenu {
      position: absolute;
      top: 15vh;
      right: -30vw;
      height: 40vh;
      width: 30vw;
    
      display: flex;
      flex-direction: column;
      align-items: center;
    
      font-size: 3vh;
      
      background-color: #cacdce;
    }
    
    .innerMenu.transitionIn {
      transition: 1s;
      right: 0vw;
    }
    
    .innerMenu.transitionOut {
      transition: 1s;
      right: -30vw;
    }
    
    .innerMenu > a {
      margin: 2.5vh 0;
    }
    
    .logo {
      height: 14vh;
      width: 16vw;
      margin-left: 42vw;
    }
    
    .icon {
      font-size: 6vh;
    }
    
    .jumbotron {
      grid-column: col-start / span 12;
      height: 65vh;
    }
    
    [class$="-left"] {
      grid-column: col-start / span 12;
      height: 50vh;
    
      display: flex;
    }
    
    [class$="-right"] {
      grid-column: col-start / span 12;
      height: 50vh;
    
      display: flex;
    }
    
    footer {
      grid-column: col-start / span 12;
      height: 15vh;
    }

    body{
      overflow-x: hidden !important;
    }

    <!DOCTYPE>
    
    <html>
    
    <head>
      <title>testing</title>
      <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
      <script src="js/script.js"></script>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    
    <body>
    
      <nav>
        <div class="logo">
        </div>
        <div class="outerMenu">
          <a href="#" class="icon" onclick="mobileNav()"><i class="fa fa-bars"></i></a>
          <div class="innerMenu">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Gallery</a>
            <a href="#">Testimonials</a>
            <a href="#">Contact</a>
          </div>
        </div>
      </nav>
    
      <main class="wrapper">
        <header class="jumbotron">
        </header>
    
        <section class="content-one-left">
        </section>
    
        <section class="content-one-right">
        </section>
    
        <section class="content-two-left">
        </section>
    
        <section class="content-two-right">
        </section>
    
        <footer>
        </footer>
      </main>
    
    </body>
    
    </html>