当导航滑动打开和关闭时切换文本淡入淡出

Question

我试图让导航链接在您打开导航时慢慢淡入，并在您单击导航上的关闭时立即消失。目前，它会立即显示链接，并在链接关闭时继续显示。

也许 jQuery 切换？或者CSS中有什么我可以做的吗？

代码笔：https://codepen.io/mattmcgilton/pen/GRJVBxz

      <div class="col-4 d-flex flex-column align-items-end">

           <button id="open-btn" onclick="openNav()">Menu</button>

         </div>    

         <nav class="primary__nav">

            <div id="myNav" class="overlay">

                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">close</a>

            <div class="container overlay-content">

              <ul>

                 <li>this is text 123</li>

                 <li>this is text 123</li>

                 <li>this is text 123</li>

                 <li>this is text 123</li>

              </ul>

            </div>

           </div>

         </nav>

function openNav() {

  document.getElementById("myNav").style.width = "100%";

  document.getElementById("open-btn").style.display = "none";

}

function closeNav() {

  document.getElementById("myNav").style.width = "0%";

  document.getElementById("open-btn").style.display = "block";

}

body {

  background-color: gray;

}

.overlay {

  height: 100%;

  width: 0;

  position: fixed;

  z-index: 1;

  top: 0;

  left: 0;

  background-color: red;

  overflow-x: hidden;

  transition: 0.5s;

}

.overlay-content {

  position: relative;

  top: 25%;

  margin-top: 30px;

  ul {

    padding-left: 0;

    li {

      padding-bottom: 5rem;

    }

  }

}

.overlay a {

  text-decoration: none;

  text-transform: uppercase;

  font-size: 30px;

  color: red;

  display: block;

  transition: 0.3s;

  letter-spacing: 5px;

  @include bodyLight();

}

.overlay .closebtn {

  position: absolute;

  top: 50px;

  right: 70px;

  @include bodyBold();

  font-size: 12px;

  color: black;

}

Answer 1

如果我正确理解您的要求，您想要一个计时器滑块进出吗？如果是这样，你必须在课堂上正确设置计时器'overlay。目前我已经设置为2秒。function openNav() {&nbsp; $(".overlay-content").fadeIn(2000);&nbsp; document.getElementById("myNav").style.width = "100%";&nbsp; document.getElementById("open-btn").style.display = "none";}function closeNav() {&nbsp; $(".overlay-content").fadeOut(500);&nbsp; document.getElementById("myNav").style.width = "0%";&nbsp; document.getElementById("open-btn").style.display = "block";}body {&nbsp; background-color: gray;}elementToFadeInAndOut {&nbsp; animation: fadeInOut 4s linear forwards;}.overlay {&nbsp; height: 100%;&nbsp; width: 0;&nbsp; position: fixed;&nbsp; z-index: 1;&nbsp; top: 0;&nbsp; left: 0;&nbsp; background-color: red;&nbsp; overflow-x: hidden;&nbsp; transition: 2s;&nbsp; /* here */}.overlay-content {&nbsp; position: relative;&nbsp; top: 25%;&nbsp; margin-top: 30px;&nbsp; display:none;&nbsp; ul {&nbsp; &nbsp; padding-left: 0;&nbsp; &nbsp; li {&nbsp; &nbsp; &nbsp; padding-bottom: 5rem;&nbsp; &nbsp; }&nbsp; }}.overlay a {&nbsp; text-decoration: none;&nbsp; text-transform: uppercase;&nbsp; font-size: 30px;&nbsp; color: red;&nbsp; display: block;&nbsp; transition: 0.3s;&nbsp; letter-spacing: 5px;&nbsp; @include bodyLight();}.overlay .closebtn {&nbsp; position: absolute;&nbsp; top: 50px;&nbsp; right: 70px;&nbsp; @include bodyBold();&nbsp; font-size: 12px;&nbsp; color: black;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><div class="col-4 d-flex flex-column align-items-end">&nbsp; <button id="open-btn" onclick="openNav()">Menu</button></div><nav class="primary__nav">&nbsp; <div id="myNav" class="overlay">&nbsp; &nbsp; <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">close</a>&nbsp; &nbsp; <div id="hide" class="container overlay-content">&nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li>this is text 123</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>this is text 123</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>this is text 123</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>this is text 123</li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div>&nbsp; </div></nav>

Answer 2

我制作了一个简单的淡入动画，您可以element.classList.add("fadeIn")在打开导航时通过类 ( ) 将其附加到任何元素，并element.classList.remove("fadeIn")在导航关闭时将其删除 ( )。为了立即隐藏文本，您可以创建一个hidden类，display: none以相同的方式使用它。.fadeIn{&nbsp; animation: fadeIn 1s ease-in;}@keyframes fadeIn{&nbsp; from {&nbsp; &nbsp; opacity:0&nbsp; }&nbsp; to {&nbsp; &nbsp; opacity:1&nbsp; }}