jquery重新播放css動(dòng)畫所遇問題解決_jquery

css動(dòng)畫代碼
代碼如下:
.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調(diào)用播放
代碼如下:
$(".seed_txt_out").children("div").removeClass("seed_txt");
$(".seed_txt_out").children("div").addClass("seed_txt");

這時(shí)候，會(huì)發(fā)現(xiàn)，第一次顯示，動(dòng)畫會(huì)正確播放，但是，第二次的時(shí)候，動(dòng)畫就不會(huì)播放了。

后來上網(wǎng)查了一下，解決辦法很簡(jiǎn)單，復(fù)制一個(gè)元素，把原來的去掉，在新的上面添加式樣就可以了。
代碼如下:
$(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");

這里有個(gè)鏈接，老外解決的辦法。還說了其它情況。遇到類似問題的朋友可以參考下，當(dāng)然，是英文的。
http://css-tricks.com/restart-css-animation/

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com