如何使用javascript / jquery觸發點擊延遲的CSS動畫？

Question

所以我有一個問題。 我正在嘗試通過Javascript / JQuery啟動CSS動畫。 動畫在我的導航菜單中。 它由4個鏈接組成，每個鏈接放置在一個div中，寬度設置為零。 該動畫使父元素的寬度為100％，從頂部元素到底部的延遲為100ms，從300到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>