私は、ウェブサイトのユーザーが下にスクロールできることを示すアニメーションマウスの理論設計をテストしています。複雑ではなく、再利用可能なデザインを考え出しました。Velocity.js - バギーループアニメーション？
要素を複製して追加しようとすると何らかの理由で視覚的にアニメーション化されません。しかし、私が$.click()とjQueryを使用すると、1回の反復の後に修正されます。
おそらくこれはブラウザのレンダリングの問題ですか？あなたが問題を再現できない場合は、私に知らせてください！乾杯
jsfiddle：https://jsfiddle.net/xw39e0bs/4/
In this versionたちがクローン化された項目に持って来るためにセレクタを再割り当てしています。すべてのクローンは、期待どおりにアニメートされます。
complete: function(){
sel = $(".mouse .ball");
mouse();
}
速度は、現在のCSS値に基づいて開始点を計算します。したがって、動いている要素のミッドモーションをクローンすると、新しいスタートポイントになります。したがって、これを解決する1つの方法はforcefeedingを提供することです。
の作業例：
function mouse(){
$(".mouse .ball").velocity({
top: ["45%","25%"] //[TARGET_VAL,START_VAL]
},{
duration: 800,
easing: "swing",
}).velocity("reverse",{
delay: 2000,
complete: function(){
mouse();
}
});
}
mouse();
$("#clone").click(function(){
$(".mouse").last().clone().appendTo("#mice");
});
うーん、それは違いを行っていない、と変数にセレクタを置くことの間には実質的な違いは、（この関数の各ループはありませんので、これは可能性がありますこれらのクラス名に一致するすべての要素を再選択する必要があります）。しかし、私の最新バージョンのように、DOMを更新しています（このビデオで見られるように：https://www.useloom.com/share/59305bcf7600425094a603bfe66143aa）。 – TheMintyMate
これは奇妙なものです。私は、ドットが休止位置にあるときにクローンを作成するとアニメーション化しないことがわかりましたが、最高位にあるときにクローンするとアニメーションが始まります。 – David