5

你如何检测在 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 浏览器的代码，特别是 Mobile Safari。

谢谢！

4

2 回答 2

5

从 jQuery 中，您可以访问该originalEvent对象，并从那里访问该animationName属性：

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

（仅限 Webkit）JS Fiddle 演示。

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

以上内容已更新，以提供更好的说明：

$('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;
}
于 2012-09-19T16:26:02.537 回答
0

An event listener for webkitAnimationEnd should work. Something along the lines of:

    $object.addEventListener('webkitAnimationEnd', function(){
        console.log( 'End Detected' );
    }, false);
于 2012-09-19T16:16:03.117 回答