在JavaScript中检测哪个CSS动画刚刚结束？

Question

如何在JavaScript中检测哪个CSS动画刚刚完成？

最终需要重新触发CSS动画。由于HTML层次结构，我们更喜欢不检查元素的类，而是仅在特定动画结束时采取行动。如果您有一种方法可以重新触发动画而无需删除/添加类，请告诉我们。

否则... 我们的代码：

    page.find( '.button.letter' ).on( 'webkitAnimationEnd', function() {
        $( this ).removeClass( 'tap_animation' );

        console.log( 'Hi: ' + this.style.webkitAnimationName );

        if ( !write_mode() ) {
            do_write( this );
        }
    });

this.style.webkitAnimationName 总是返回一个空字符串。

我们做错了什么吗？

我们需要针对WebKit浏览器（特别是移动Safari）的代码。

谢谢！

- Crashalot

---

如果你想循环播放动画，CSS3已经支持这个功能。如果这不是你想要的，请详细说明一下。 - Shmiddty

不要循环播放动画，只需重新触发它而无需添加/删除类。我们通过添加类来触发动画，然后在一段时间后需要重新触发它。如果添加/删除类是唯一的方法，那么我们需要解决此处列出的问题。 - Crashalot

Answer 1

通过 jQuery，您可以访问 originalEvent 对象，然后从中获取 animationName 属性：

$('body').on('webkitAnimationEnd', function(e){
    var animName = e.originalEvent.animationName;
    console.log(animName);
});​

(仅限Webkit) JS Fiddle演示.

从此，只需使用if来检查动画名称是什么（过去式，我想，因为它已经结束了）。

上述更新，可能提供更好的说明：

$('div').on('webkitAnimationEnd', function(e){
    var animName = e.originalEvent.animationName;
    if (animName == 'bgAnim') {
        alert('the ' + animName + ' animation has finished');
    }
});​

(仅适用于Webkit) JS Fiddle演示.

此演示使用以下HTML：

<div><span>text</span></div>​

还有CSS：

@-webkit-keyframes bgAnim {
    0%, 100% {
        color: #000;
        background-color: #f00;
    }
    50% {
        color: #fff;
        background-color: #0f0;
    }
}

@-webkit-keyframes fontSize {
    0%, 100% {
        font-size: 100%;
    }
    50% {
        font-size: 300%;
    }
}

div {
    font-weight: bold;
    -webkit-animation: bgAnim;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 2;
}

span {
    font-size: 100%;
    font-weight: bold;
    -webkit-animation: fontSize;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 1;
}

- David Thomas

---

你太棒了，但是你和你的51.4k分已经知道了。 :) 你不会碰巧知道另一种重新触发CSS动画的方法（在某些用户操作之后）而不必添加/删除类吗？ - Crashalot

谢谢你！关于重新启动动画，我认为（虽然我还没有真正探索这个主题），添加/删除/切换类是唯一的方法，不幸的是。 - David Thomas

谢谢，大卫。我们有一个相关的问题，希望您也知道答案: https://dev59.com/JWjWa4cB1Zd3GeqPsaLv。如果您有时间，我们很想听听您的想法！ - Crashalot

我已经看过了，并发布了一个潜在的解决方案。虽然我并不特别确信它是一个很好的解决方案，或者比你已有的解决方案更好。 - David Thomas

一种方法（如果您的动画适合）是拥有一个无限迭代动画，并在暂停和运行之间切换其animation-playstate属性。（但是playstate现在有点buggy） - Michael Mullany

Answer 2

一个针对webkitAnimationEnd的事件监听器应该有效。大致代码如下：

    $object.addEventListener('webkitAnimationEnd', function(){
        console.log( 'End Detected' );
    }, false);

- AJak

---

谢谢，但是您如何检测哪个动画已经结束？多个动画同时针对同一对象运行。 - Crashalot