jquery - 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 中取出 hidden 类，它会工作正常，但当我这样做时，它会阻止我在登录页面上的 CTA 按钮。我想要做的是在点击变成“X”的菜单按钮后，我的导航菜单链接应该一个接一个地转换出来，就像它转换它时一样，而不必将隐藏类添加回#再次导航容器。如果我没有任何意义，我很抱歉。英语不是我的母语，但请看看我的笔，您就会明白我的意思。

Answer 1

实现此目的的一种方法是将转换放入 CSS 中，然后简单地切换容器上的类。我们将使用 transition-delay 属性来处理您想要的顺序计时效果。下面是一个例子。

这里是 a fork of your Pen以充分展示它。

相关的 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');
});