如何通过 JavaScript 重新触发 WebKit CSS 动画? [英] How do I re-trigger a WebKit CSS animation via JavaScript?

问题描述

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

So, I've got this -webkit-animation rule:

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

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

And some CSS defining some of the animation rules on my box:

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

我可以像这样摇动#box:

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

但我以后不能再动摇它了.

But I can't shake it again later.

这只摇动盒子一次:

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

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

How can I re-trigger a CSS animation via JavaScript without using timeouts or multiple animations?

推荐答案

我根据 CSS3 过渡测试 github 页面.

基本上，CSS 动画有一个 animationEnd 事件，当动画完成时会触发该事件.

Basically, CSS animations have an animationEnd event that is fired when the animation completes.

对于 webkit 浏览器，这个事件被命名为webkitAnimationEnd".因此，为了在调用后重置动画，您需要为 animationEnd 事件的元素添加一个事件监听器.

For webkit browsers this event is named "webkitAnimationEnd". So, in order to reset an animation after it has been called you need to add an event-listener to the element for the animationEnd event.

在普通的 javascript 中:

In plain vanilla 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:

and with 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 转换、转换和动画.

---

The source code for CSS3 transition tests (mentioned above) has the following support object which may be helpful for cross-browser CSS transitions, transforms, and animations.

这是支持代码(重新格式化):

Here is the support code (re-formatted):

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;
}());

我没有添加代码来检测每个浏览器的动画"属性.我已经把这个答案写成了社区维基"，把它留给你.:-)

I have not added the code to detect "animation" properties for each browser. I’ve made this answer "community wiki" and leave that to you. :-)

这篇关于如何通过 JavaScript 重新触发 WebKit CSS 动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！