如何通过JavaScript重新触发WebKit CSSanimation？

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

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

还有一些CSS在我的box上定义了一些animation规则：

 #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重新触发CSSanimation而不使用超时或多animation？

Answer 1

我find了基于CSS3转换testinggithub页面的源代码和例子的答案。

基本上，CSSanimation有一个animation完成时触发的animationEnd事件。

对于webkit浏览器，这个事件被命名为“ webkitAnimationEnd ”。 所以，为了在被调用之后重置一个animation，你需要添加一个事件监听器给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转换testing的源代码（如上所述）具有以下support对象，可能有助于跨浏览器CSS转换，转换和animation。

以下是支持代码（重新格式化）：

 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(/([AZ])/g, '-$1').toLowerCase(); return support; }()); 

我没有添加代码来检测每个浏览器的“animation”属性。 我已经做了这个答案“社区维基”，并将其留给你。 🙂

Answer 2

你必须先删除animation，然后再添加。 例如：

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

要做到这一点没有setTimeout在onmousedown ，删除animation，并在onclick添加：

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

Answer 3

一个简单而有效的select：

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，因为animation似乎并没有在那里工作…

Answer 4

根据https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Tips中的build议，使用requestAnimationFrame删除并添加animation类，以确保呈现引擎处理这两个更改。; 我认为这比使用setTimeout更清洁，并且在前一个播放完成之前处理重放animation。

 $('#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的克隆工作相当不错卡拉OK：在IE11不得不强制回stream（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> 

Answer 7

用你的javascript，你也可以添加（然后删除）声明animation的CSS类。 明白了吗 ？

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

Answer 8

1）将animation名称添加到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）这是DEMO 。