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”，并留给您。:-)