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

Question

所以，我有这个 -webkit-animation 规则:

@-webkit-keyframes shake {
    0% {
        left: 0;
    }
    25% {
        left: 12px;
    }
    50% {
        left: 0;
    }
    75% {
        left: -12px;
    }
    100% {
        left:0;
    }
}

还有一些 CSS 在我的 box 上定义了一些动画规则:

#box{
    -webkit-animation-duration: .02s;
    -webkit-animation-iteration-count: 10;
    -webkit-animation-timing-function: linear;
}

我可以像这样摇动 #box:

document.getElementById("box").style.webkitAnimationName = "shake";

但我以后不能再摇了。

这只会摇动盒子一次:

someElem.onclick = function(){
    document.getElementById("box").style.webkitAnimationName = "shake";
}

如何在不使用超时或多个动画的情况下通过 JavaScript 重新触发 CSS 动画？

Answer 1

我根据 CSS3 transition tests github page 中的源代码和示例找到了答案.

基本上，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 transition tests 的源代码(上面提到的)具有以下 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;
}());

我没有添加代码来检测每个浏览器的“动画”属性。我已将此答案设为“社区维基”并留给您。 :-)