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>

私は＃1のnav-コンテナから隠されてのクラスを取るが、それならばそれは正常に動作しますthのCTAボタンをブロックする私がそれをすると、ランディングページが表示されます。私は何をしようとしているのは、 'X'に変わるメニューボタンを押した後です。私のnavメニューリンクは、隠されたクラスを＃ nav-containerを再度実行します。もし意味がないのであれば、すみません。英語は私の母国語ではありませんが、私のペンを見てみると、私の言いたいことが分かります。

Answer 1

これを行う方法の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'); 
});