如何使用 JavaScript 重新启动 WebKit CSS 动画？

如何通过 JavaScript 重新触发 WebKit CSS 动画

此问题解决使用 JavaScript 重新触发 CSS 动画的问题。现有的动画规则“@-webkit-keyframes shake”定义了晃动效果，但随后尝试通过 JavaScript 再次激活它却失败了。

提供的解决方案利用了“animationEnd”事件，特别是“webkitAnimationEnd” WebKit 浏览器。当此事件被触发时，表示动画完成。

要重新触发动画，会在元素中添加“webkitAnimationEnd”事件的事件侦听器。收到此事件后，元素的“webkitAnimationName”样式属性将被清除，从而有效地重置动画。

示例（纯香草 JavaScript）：

var element = document.getElementById('box');

element.addEventListener('webkitAnimationEnd', function(){
    this.style.webkitAnimationName = '';
}, false);

document.getElementById('button').onclick = function(){
    element.style.webkitAnimationName = 'shake';
    // You may want to prevent default action here.
};

示例(jQuery):

var $element = $('#box').bind('webkitAnimationEnd', function(){
    this.style.webkitAnimationName = '';
});

$('#button').click(function(){
    $element.css('webkitAnimationName', 'shake');
    // You may want to prevent default action here.
});

跨浏览器支持：

对于跨浏览器支持，可以使用“css3AnimationSupport”对象来检测 CSS不同浏览器支持的过渡、变换和动画属性。

var css3AnimationSupport = (function(){
    var div = document.createElement('div'),
        divStyle = div.style;

    return {
        transition: (function(){
            return divStyle.MozTransition     === ''? {name: 'MozTransition'   , end: 'transitionend'} :
                (divStyle.MsTransition     === ''? {name: 'MsTransition'    , end: 'msTransitionend'} :
                (divStyle.WebkitTransition === ''? {name: 'WebkitTransition', end: 'webkitTransitionEnd'} :
                (divStyle.OTransition      === ''? {name: 'OTransition'     , end: 'oTransitionEnd'} :
                (divStyle.transition       === ''? {name: 'transition'      , end: 'transitionend'} :
                false))));
        })()
        // ... Other detections omitted for brevity
    };
}());

以上是如何使用 JavaScript 重新启动 WebKit CSS 动画？的详细内容。更多信息请关注PHP中文网其他相关文章！