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

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() {

  $(".overlay-content").fadeIn(2000);

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

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

}

function closeNav() {

  $(".overlay-content").fadeOut(500);

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

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

}

body {

  background-color: gray;

}

elementToFadeInAndOut {

  animation: fadeInOut 4s linear forwards;

}

.overlay {

  height: 100%;

  width: 0;

  position: fixed;

  z-index: 1;

  top: 0;

  left: 0;

  background-color: red;

  overflow-x: hidden;

  transition: 2s;

  /* here */

}

.overlay-content {

  position: relative;

  top: 25%;

  margin-top: 30px;

  display:none;

  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;

}

<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">

  <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 id="hide" 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>

Answer 2

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

.fadeIn{

  animation: fadeIn 1s ease-in;

}

@keyframes fadeIn{

  from {

    opacity:0

  }

  to {

    opacity:1

  }

}