toggleClass

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>

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

JS：

＆＃13;

＆＃13;

$("#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()
    })
  })

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果我从＃nav-container中取出隐藏的类，但是当我这样做时，它会阻止我在登录页面上的CTA按钮。我想要的是在点击菜单按钮变成＆＃39; X＆＃39;后，我的导航菜单链接应该一个接一个地过渡，就像转换它时一样，我不必添加类再次隐藏回#avour-container。如果我没有任何意义，我很抱歉。英语不是我的母语，但请你试着看看我的笔，你就会明白我的意思。

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