1

定義済みの css クラスの特定のセットがあり、それを使用して div をアニメーション化できます。シナリオは、「スライドインエフェクト」でdivをアニメーション化しようとしているということです。「スライドイン」クラスをdivに追加するだけで、divがスライドインします。しかし、2回目にすると問題が発生します。2回目には、divにはすでに「スライドイン」クラスがあるため、「スライドイン」クラスを削除し、同じクラスを再度追加してアニメーション化しています。しかし、アニメーションは発生しませんが、「スライドイン」クラスを削除した直後に「スライドイン」クラスを追加する前に 10 ミリ秒の遅延を追加すると、アニメーションが発生します。

デモ、Webkit ブラウザでのみ正常に動作

デモ 1 (時間遅延の追加なし、アニメーションは 2 回目は動作しません)

Demo1スライドインボタンを 2 回試します。

デモ2、（時間遅延を追加、アニメーション作品）

Demo2スライドインボタンを 2 回試します。

時間遅延に頼らずにこれを行う方法を知りたい

4

2 に答える 2

2

デモ1-スライド機能を次のように置き換えます。

function slide(){
  $('#tg').addClass('slide in');
 var t= setTimeout(function(){$('#tg').removeClass('slide in');},600);
}

アニメーションが完了した後、クラスを削除しました。デモ： http： //jsbin.com/eyerot/12/edit

自動スクロールの場合：jsを次のように置き換えます。

function slide(){
  interval = setInterval(function(){slide_me();},2000);
}

function slide_me(){
  $('#tg').addClass('slide in');
    t= setTimeout(function(){$('#tg').removeClass('slide in');},600);
}
于 2012-10-23T10:23:37.300 に答える
1

animationend最善の方法は、アニメーション化された要素を、CSS アニメーションが完了したときに発生するコールバックにバインドすることです。

JSを書き直す方法は次のとおりです。

// Bind your element to animationend callbacks from all supporting browsers
$('#tg').bind('webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd', function(event){
  // Each time this callback is called the "slide in" classes are removed.
  $('#tg').removeClass('slide in');
});

// Each time the button is clicked the classes are re-added
function slide() {
  $('#tg').addClass('slide in');
}
于 2012-10-23T10:34:08.233 に答える