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

问题描述

所以，我这有 -webkit-动画规则：

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

和一些CSS定义在我的箱一些动画规则：

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?

推荐答案

我发现基于源$ C ​​$ c和例子在的 CSS3过渡测试GitHub的页面。

I found the answer based on the source code and examples at the CSS3 transition tests github page.

基本上，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：

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

$('#button').click(function(){
    $element.css('webkitAnimationName', 'shake');
    // you'll probably want to preventDefault here.
});

---

源$ C ​​$ C为 CSS3过渡测试（上述）具有以下支持对象这可能是跨浏览器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.

下面是支持code（重新格式化）：

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

我没有加code来检测每个浏览器动画的属性。我做了这样的回答社区维基，并留给你。 ： - ）

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屋！