如何觸發css動畫w /延遲點擊使用JavaScript/jQuery的？

Question

所以我有一個問題。我試圖通過Javascript/JQuery啓動CSS動畫。動畫是我的導航菜單。它由4個鏈接組成，每個鏈接放置在寬度設置爲零的div中。動畫使寬度從父元素的寬度的100％延遲至+ 100ms，從頂部元素到底部從300開始，因此看起來好像所有元素都單獨出現以形成菜單。另外一種在點擊時反轉動畫的方法也很棒。我嘗試使用toggle（），但不成功。

<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>