如何动态重新触发 WebKit CSS 动画？

动态重新触发 WebKit CSS 动画

使用由 WebKit 提供支持的 CSS 动画时，有时可能需要重新触发在初始执行后触发动画。为了在不依赖超时或多个动画的情况下实现此目的，我们可以利用内置事件：“webkitAnimationEnd”。

动画完成时会触发此事件，允许我们以编程方式重置和重新启动它。具体方法如下：

在纯 JavaScript 中：

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

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

document.getElementById('button').onclick = function(){
    element.style.webkitAnimationName = 'shake';
    // Prevent default browser behavior here if needed.
};

在 jQuery 中：

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

$('#button').click(function(){
    $element.css('webkitAnimationName', 'shake');
    // Prevent default browser behavior here if needed.
});

此方法提供了按需重新触发 CSS 动画的干净有效的方法。它消除了复杂的超时或额外动画的需要，确保平滑和无缝的过渡。

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