如何通过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;
}

我可以像这样shake #box ：

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

但是我以后不能再动摇了。

这只会摇晃盒子一次：

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

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

Answer 1

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

Answer 2

您必须先删除动画，然后再次添加它。 例如：

document.getElementById("box").style.webkitAnimationName = "";
setTimeout(function ()
{
    document.getElementById("box").style.webkitAnimationName = "shake";
}, 0);

要在没有setTimeout的情况下执行此操作，请在onmousedown期间删除动画，并在onclick期间添加动画：

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

Answer 3

一个简单但有效的替代方法：

HTML：

<div id="box"></div>
<button id="shake-the-box">Shake it!</button>​

CSS：

#box{
    background: blue;
    margin:30px;
    height:50px;
    width:50px;
    position:relative;
    -moz-animation:shake .2s 0 linear 1; 
    -webkit-animation:shake .2s 0 linear 1; 
}
#box.trigger{
    display:table;
}
@-webkit-keyframes shake {
    0% {
        left: 0;
    }
    25% {
        left: 12px;
    }
    50% {
        left: 0;
    }
    75% {
        left: -12px;
    }
    100% {
        left:0;
    }
}
@-moz-keyframes shake {
    0% {
        left: 0;
    }
    25% {
        left: 12px;
    }
    50% {
        left: 0;
    }
    75% {
        left: -12px;
    }
    100% {
        left:0;
    }
}​

jQuery的：

$('#shake-the-box').click(function(){

  $('#box').toggleClass('trigger');

});​

演示：
http://jsfiddle.net/5832R/2/

问题：
我不知道它是否可以在Firefox上运行，因为该动画似乎无法在Firefox上运行...

Answer 4

按照https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Tips的建议，使用requestAnimationFrame删除并添加动画类，以确保渲染引擎处理这两个更改。 我认为这比使用setTimeout更干净，并且可以在上一次播放完成之前处理动画的重播。

$('#shake-the-box').click(function(){   
  $('#box').removeClass("trigger");
  window.requestAnimationFrame(function(time) {
  window.requestAnimationFrame(function(time) {
      $('#box').addClass("trigger");
    });
    });    

}）;

http://jsfiddle.net/gcmwyr14/5/

Answer 5

在暂停的卡拉OK上，克隆效果非常好：在IE11上必须进行重排（R.Krupiński的较短版本）。

$('#lyrics').text("Why does it hurt when I pee?");
changeLyrics('3s');  

function changeLyrics(sec) {
  str = 'lyrics '+ sec + ' linear 1';
  $('#lyrics').css( 'animation', str);
  $('#lyrics').css( 'animation-play-state', 'running' );
  $('#lyrics').replaceWith($('#lyrics').clone(true)); 
}

或者您可以使用以下命令：

function resetAnimation(elm) {
  $('#'+elm).replaceWith($('#'+elm).clone(true)); 
}

Answer 6

首先重置该值。 使用重排来应用更改而不使用超时：

 function shake() { var box = document.getElementById("box"); box.style.animationName = null; box.offsetHeight; /* trigger reflow */ box.style.animationName = "shake"; } 

 @keyframes shake { 0% { left: 0; } 25% { left: 12px; } 50% { left: 0; } 75% { left: -12px; } 100% { left: 0; } } #box { position: absolute; width: 75px; height: 75px; background-color: black; animation-duration: .02s; animation-iteration-count: 10; animation-timing-function: linear; } button { position: absolute; top: 100px; } 

 <div id="box"></div> <button onclick="shake()">Shake</button> 

与推荐的animationEnd答案相比，即使动画仍在进行中，此方法也会重置动画。 这可能是或可能不是您想要的。

---

一种替代方法是创建一个重复的@keyframes动画并在两者之间切换：

 function shake() { var box = document.getElementById("box"); if (box.style.animationName === "shake") box.style.animationName = "shake2"; else box.style.animationName = "shake"; } 

 @keyframes shake { 0% { left: 0; } 25% { left: 12px; } 50% { left: 0; } 75% { left: -12px; } 100% { left: 0; } } @keyframes shake2 { 0% { left: 0; } 25% { left: 12px; } 50% { left: 0; } 75% { left: -12px; } 100% { left: 0; } } #box { position: absolute; width: 75px; height: 75px; background-color: black; animation-duration: .02s; animation-iteration-count: 10; animation-timing-function: linear; } button { position: absolute; top: 100px; } 

 <div id="box"></div> <button onclick="shake()">Shake</button> 

Answer 7

使用setTimeout()删除类并在5毫秒后读取它是否存在问题？

svg.classList.remove('animate');
setTimeout(function() {
  svg.classList.add('animate');
}, 10);

Answer 8

1）将动画名称添加到CSS中的#box.trigger

#box.trigger{
    display:table;
    animation:shake .2s 0 linear 1;
    -moz-animation:shake .2s 0 linear 1; 
    -webkit-animation:shake .2s 0 linear 1;
}

2）在Java脚本中，您无法删除类trigger 。

3）通过使用setTimeOut方法删除类名。

$(document).ready(function(){
    $('#shake-the-box').click(function(){

    $('#box').addClass('trigger');
    setTimeout(function(){
        $("#box").removeClass("trigger")},500)        
    });
}); 

4）这是演示 。

Answer 9

使用JavaScript，您还可以添加（然后删除）在其中声明动画的CSS类。 明白了吗 ？

#cart p.anim {
  animation: demo 1s 1; // Fire once the "demo" animation which last 1s
}