如何使用 JavaScript 可靠地重新触发 WebKit CSS 动画？

强制重新触发 WebKit CSS 动画

使用 WebKit CSS 动画时，尝试多次重新触发动画时可能会出现限制。本文解决了此类场景，并提供了通过 JavaScript 重新启动 CSS 动画的解决方案，而无需诉诸超时或其他动画。

为了实现此目的，WebKit 浏览器利用“webkitAnimationEnd”事件，该事件在动画完成时触发。动画循环。通过利用此事件，可以通过编程方式重置和重新启动动画。

Vanilla JavaScript 实现

在纯 JavaScript 中，该方法涉及：

1. 选择要动画的元素。
2. 添加事件监听器“webkitAnimationEnd”事件。
3. 在事件触发时重置动画。

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

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

document.getElementById('button').onclick = function(){
    element.style.webkitAnimationName = 'shake';
};

jQuery 实现

利用 jQuery 提供了一个简化的语法：

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

$('#button').click(function(){
    $element.css('webkitAnimationName', 'shake');
});

跨浏览器 CSS 支持

为了跨浏览器兼容性，请考虑使用浏览器检测库。 CSS3 转换测试提供了一个支持对象，可以帮助识别不同浏览器的正确事件名称和动画属性。

// Browser detection object
var css3AnimationSupport = (function(){
    var div = document.createElement('div'),
        divStyle = div.style;
    return {
        transform: divStyle.MozTransform  ||
                   divStyle.MsTransform   ||
                   divStyle.WebkitTransform ||
                   divStyle.OTransform    ||
                   divStyle.transform,
        transition: divStyle.MozTransition ||
                    divStyle.MsTransition   ||
                    divStyle.WebkitTransition ||
                    divStyle.OTransition    ||
                    divStyle.transition
    };
}());

通过利用适当的事件名称和动画属性，此方法可以重新触发以跨浏览器兼容的方式实现 CSS 动画。

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