jquery重新播放css动画所遇问题解决

146 阅读 0 评论 97 点赞

我是靠谱客的博主专注帆布鞋，最近开发中收集的这篇文章主要介绍jquery重新播放css动画所遇问题解决，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

最近在做css动画，遇到需要用脚本重新播放动画的情况。例如：

css动画代码

复制代码代码如下:

 
.seed_txt_out .seed_txt h2 { 
animation-name: seed-h2; 
animation-duration: 2s; 
animation-timing-function: ease; 
animation-delay: 0s; 
animation-iteration-count: 1; 
animation-direction: alternate; 
animation-play-state: running; 
position: relative; 
top: 10px; 
} 
@keyframes seed-h2 
{ 
from {top: -120px;} 
to {top: 10px;} 
} 

jquery调用播放

复制代码代码如下:

 
$(".seed_txt_out").children("div").removeClass("seed_txt"); 
$(".seed_txt_out").children("div").addClass("seed_txt"); 

这时候，会发现，第一次显示，动画会正确播放，但是，第二次的时候，动画就不会播放了。

后来上网查了一下，解决办法很简单，复制一个元素，把原来的去掉，在新的上面添加式样就可以了。

复制代码代码如下:

 
$(opts.txt).children("div").removeClass("seed_txt"); 
temp = $(opts.txt).children("div:eq(" + $(this).parent("ul").children("li").index(this) + ")"); 
newDiv = temp.clone(true); 
temp.after(newDiv); 
temp.remove(); 
newDiv.addClass("seed_txt"); 

这里有个链接，老外解决的办法。还说了其它情况。遇到类似问题的朋友可以参考下，当然，是英文的。
http://css-tricks.com/restart-css-animation/