toggleClass 后不同的 CSS 过渡

Question

大家好

我最近做了这支笔https://codepen.io/alexyap/full/MmYvLw/，我被我的导航菜单难住了。当它过渡时它工作正常，但当它淡出时看起来很糟糕。我只是无法弄清楚这部分。

<div id="nav-container" class="hidden">
 <ul>
  <li id="nav1" class="hidden"><a href="#">About</a></li>
  <li id="nav2" class="hidden"><a href="#">Work</a></li>
  <li id="nav3" class="hidden"><a href="#">Contact</a></li>
 </ul>
</div>

.hidden {
  opacity: 0;
  visibility: hidden;
  margin-left: -60%;
}

JS：

$("#nav-container").delay(200).queue(function(n){
      $(this).toggleClass("hidden")
      n()
    })

    $("#nav1").delay(400).queue(function(n){
      $(this).toggleClass("hidden")
      n()
    })

    $("#nav2").delay(600).queue(function(n){
      $(this).toggleClass("hidden")
      n()
    })

    $("#nav3").delay(800).queue(function(n){
      $(this).toggleClass("hidden")
      n()
    })
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果我从 #nav-container 中取出隐藏类，效果很好，但当我这样做时，它会阻止登陆页面上的 CTA 按钮。我想要做的是点击菜单按钮后变成“X”，我的导航菜单链接应该一个接一个地转换出来，就像它转换它时一样，而无需我将隐藏类添加回 #再次导航容器。如果我没有任何意义，我很抱歉。英语不是我的母语，但请尝试看看我的笔，你就会明白我的意思。

Answer 1

实现此目的的一种方法是将过渡放入 CSS 中，然后简单地切换容器上的类。我们将使用

transition-delay

属性来处理您想要的顺序计时效果。下面是一个例子。

相关HTML：

<div id="menu-overlay"></div>
<div id="menu-button-container">
  <div id="menu-button">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<div id="nav-container">
  <ul>
    <li id="nav1"><a href="#">About</a></li>
    <li id="nav2"><a href="#">Work</a></li>
    <li id="nav3"><a href="#">Contact</a></li>
  </ul>
</div>

相关CSS：

#menu-overlay {
  position: absolute;
  height: 0;
  width: 100%;
  background: rgba(52, 73, 94,1.0);
  left: 0;
  top: 0;
  transition: .5s ease-in 1200ms;
  z-index: 2000;
}
.showing #menu-overlay {
  transition: .5s ease-in 0s;
}
.reveal {
  height: 100vh !important;
}
#nav-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -10;
  transition-property: z-index;
  transition-delay: 1200ms;
}
.showing #nav-container {
  z-index: 2000;
  transition-delay: 0s;
}
#nav-container ul li {
  list-style: none;
  margin-left: 0;
  opacity: 0;
  visibility: hidden;
  margin-left: -60%;
}
.showing #nav-container ul li {
  opacity: 1;
  visibility: visible;
  margin-left: 0;
}
#nav1 {
  transition: 0.6s ease-in 200ms;
}
#nav2 {
  transition: 0.6s ease-in 400ms;
}
#nav3 {
  transition: 0.6s ease-in 600ms;
}

相关JS：

$('#menu-button').click(function(){
  $('body').toggleClass('showing');
});