jquery - ランディング ページのウェルカム効果用の animate.css

Question

このクールなものを見つけましたhttps://github.com/daneden/animate.css . ページの起動中には機能しますが、その後、アニメーション css がまだ途中で起動することがわかりました。

たとえば、 $('.sidebar').addClass('animated fadeInLeft');ページからページへのクリック時に引き続きアニメーションを使用します..一度だけ動作するように制限するにはどうすればよいですか?

Answer 1

.css ファイル ( https://github.com/daneden/animate.css/blob/master/animate.css ) によると、アニメーションの長さは 1 秒です。

したがって、1秒後に、要素からクラスの前に設定されたものを削除するだけです。

setTimeout(function(){
   $('.sidebar').removeClass('animated fadeInLeft');
}, 1000);

「.hinge」クラスを使用している場合は、「setTimeout」関数のタイムアウトを 2 秒に増やす必要があります。

Answer 2

エフェクトが実行されたら、次を実行します。

$('.sidebar').removeClass('animated fadeInLeft');

Answer 3

ページからページへとクリックするとリロードが発生する場合は、

$('.sidebar').addClass('animated fadeInLeft');

アニメーションを必要としないサイトのスクリプト。

それ以外の場合は、アニメーションを使用removeClass()したくないサイトでアニメーションを引き起こしたクラスを削除するために使用します。

$('.sidebar').removeClass('animated fadeInLeft');