javascript/jqueryを使用してクリックするとCSSアニメーションを遅らせる方法はありますか？

Question

ですから質問があります。私はJavascript/JQueryを通してCSSアニメーションを起動しようとしています。アニメーションは私のナビゲーションメニューです。これはdivに配置された4つのリンクで構成され、幅はゼロに設定されます。アニメーションは親の幅の100％の幅を+ 100msの遅延で上から下に300から始めるので、すべてが別々にメニューを形成するように見えます。また、クリックしてアニメーションを反転させる方法も優れています。私はトグル（）を使ってみましたが失敗しました。

<div class="navbar"> 
    <a href="index.php"><div id="nav1">Home</div></a> 
    <a href="about.php"><div id="nav2">About</div></a> 
    <a href="work.php"><div id="nav3">Work</div></a> 
    <a href="contact.php"><div id="nav4">Msg</div></a> 
</div> 

はここJavaScriptコード

function expand() { 
    var navName = '#nav'; 
    var delay = 0; 
    for(i = 1; i < 5; i++){ 
    //Resets nav value 
    navName = '#nav'; 
    delay = 200 
    //Adds number to class name 
    navName += i; 
    delay += 100; 
    //alert(navName + delay); 
    $(navName).css('animation', 'expand ease 500ms forwards'); 
    $(navName).css('animation-delay', delay +'ms'); 

}

Answer 1

むしろjQueryのを使用してanimationプロパティを適用するよりも、あなたがクラスをトグルすることによって、それを適用することができます。このクラスには、既に必要なアニメーションプロパティが含まれます。

$('.target').on('click', function() { 
 
    $(this).toggleClass('animate'); 
 
});

.target { 
 
    padding: 1em; 
 

 
    background: cornflowerblue; 
 
} 
 

 
.animate { 
 
    animation: expand 1s linear; 
 
    animation-delay: 200ms; 
 
} 
 

 
@keyframes expand { 
 
    0% { 
 
     transform: scale(1); 
 
     opacity: 0; 
 
    } 
 
    60% { 
 
     transform: scale(2); 
 
     opacity: 1; 
 
    } 
 
    100% { 
 
     transform: scale(1.5); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="target">click me</div>