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-容器隐藏了，但它阻止我的CTA按钮当我这样做的时候着陆页。我想去的是在点击菜单按钮变成'X'后，我的导航菜单链接应该转换出一个又一个，就像它转换时一样，而不必将隐藏类添加回＃再次使用nav-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'); 
});