ホームページ  >  記事  >  ウェブフロントエンド  >  jqueryのリプレイCSSアニメーションの問題が発生しました_jquery

jqueryのリプレイCSSアニメーションの問題が発生しました_jquery

WBOY
WBOYオリジナル
2016-05-16 17:24:511114ブラウズ

最近 CSS アニメーションを作成していて、アニメーションを再生するためにスクリプトを使用する必要がある状況に遭遇しました。例:

css アニメーション コード

コードをコピー コードは次のとおりです:

.seed_txt_out .seed_txt h2 {
アニメーション名: シード h2;
アニメーション タイミング関数:
アニメーション遅延: 0 秒; 🎜>アニメーションの反復数: 1;
アニメーションの方向: 代替;
位置: 相対;
>@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");
この時点で、初めてアニメーションが表示されることを確認します。正常に再生されますが、2 回目ではアニメーションが再生されません。

後でオンラインで調べたところ、要素をコピーし、元の要素を削除して、新しい要素にスタイルを追加するだけで解決できることがわかりました。



コードをコピー
コードは次のとおりです。 $(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.remove(); ");


ここにリンク、外国人向けの解決策があります。他の状況についても言及されました。同じような問題に遭遇した友人は、もちろん英語で説明しています。
http://css-tricks.com/restart-css-animation/
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。