如何使用javascript/jquery触发带有点击延迟的css动画？

Question

所以我有一个问题。我正在尝试通过 Javascript/JQuery 启动 CSS 动画。动画是我的导航菜单。它由 4 个链接组成，每个链接都放置在一个宽度设置为零的 div 中。动画使宽度为父宽度的 100%，延迟 +100 毫秒，从顶部元素到底部的 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>