css如何重置触发动画,如何通过JavaScript重新触发WebKit CSS动画？

小编典典

我在CSS3转换测试github页面上根据源代码和示例找到了答案。

基本上，CSS动画具有一个animationEnd在动画完成时触发的事件。

对于Webkit浏览器，此事件称为“webkitAnimationEnd”。因此，为了在调用动画后重置动画，您需要在事件元素中添加事件监听器animationEnd。

在普通的javascript中：

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

element.addEventListener('webkitAnimationEnd', function(){

this.style.webkitAnimationName = '';

}, false);

document.getElementById('button').onclick = function(){

element.style.webkitAnimationName = 'shake';

// you'll probably want to preventDefault here.

};

并使用jQuery：

var $element = $('#box').bind('webkitAnimationEnd', function(){

this.style.webkitAnimationName = '';

});

$('#button').click(function(){

$element.css('webkitAnimationName', 'shake');

// you'll probably want to preventDefault here.

});

CSS3过渡测试的源代码(如上所述)具有以下support对象，这可能对跨浏览器的CSS过渡，转换和动画很有帮助。

以下是支持代码(重新格式化)：

var css3AnimationSupport = (function(){

var div = document.createElement('div'),

divStyle = div.style,

// you'll probably be better off using a `switch` instead of theses ternary ops

support = {

transition:

divStyle.MozTransition === ''? {name: 'MozTransition' , end: 'transitionend'} :

// Will ms add a prefix to the transitionend event?

(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)))),

transform:

divStyle.MozTransform === '' ? 'MozTransform' :

(divStyle.MsTransform === '' ? 'MsTransform' :

(divStyle.WebkitTransform === '' ? 'WebkitTransform' :

(divStyle.OTransform === '' ? 'OTransform' :

(divStyle.transform === '' ? 'transform' :

false))))

//, animation: ...

};

support.transformProp = support.transform.name.replace(/([A-Z])/g, '-$1').toLowerCase();

return support;

}());

我尚未添加代码来检测每个浏览器的“动画”属性。我已将此答案设为“社区Wiki”，并留给您。

2020-05-01