如何重新运行css3的动画?

如何通过一个事件(hover,click..)触发css3动画的重新执行?
在stackoverflow找到一个相关的问题,但是下面给出的答案也不起作用。
http://jsfiddle.net/arunpjohny/8WQcy/1/
这篇文章挺好的,介绍了重新运行css3动画的不同方法
animation必须是infinite,animation-play-state才有效。
restart用这种方法挺好:
//retrievetheelement
element=document.getElementById("logo");
//resetthetransitionby...
element.addEventListener("click",function(e){
e.preventDefault;
//->removingtheclass
element.classList.remove("run-animation");
//->triggeringreflow/*Theactualmagic*/
//withoutthisitwouldn'twork.Tryuncommentingthelineandthetransitionwon'tberetriggered.
element.offsetWidth=element.offsetWidth;
//->andre-addingtheclass
element.classList.add("run-animation");
},false);
白猪掌柜的
浏览 379回答 2
2回答

茅侃侃

为何不用animationend事件,这个也很好做兼容el.addEventListener('click',function(){this.classList.add('active');this.addEventListener('animationend',function(){this.classList.remove('active');});});
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript