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