Animate.cssとViewportCheckerを使用してアニメーションの遅延を追加するにはどうすればよいですか?
Daniel Edenのanimate.cssバージョン3.5.1とDirkGroenenによるjquery-viewport-checkerバージョン1.8.7を使用して、特定のWebページのさまざまなアニメーションクラス要素に「遅延」を追加しようとしています。
私は次のようなsetTimeout関数を使用しようとしました...
setTimeout(function () {
jQuery('.fadeinleft1').addClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInLeft',
offset: 100
});
}, 500
);
しかし、それは明らかに隠しクラスにも影響します。ビューポートに到達するときにアニメーションだけを遅らせる必要があり、それに応じて各オブジェクトを遅らせることができます。いつか探していて、まだ答えが見つかりません。
図を見てください。質問するとすぐに、cssの追加のみを含む修正が見つかります。 javascriptに触れる必要はありません。 animate.cssとviewport-checkerを使用するときに、遅延アニメーションを実現するための非常に迅速で簡単な方法。これを行うには、「animation-delay」を使用するcssクラスを追加します。
Javascript:
jQuery('.fadeinleft').addClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInLeft',
offset: 100
});
次のアニメーション遅延cssを必要に応じて作成し、必要な数だけ作成して、すべてのアニメーションでグローバルに使用できます。
.delay-1 {
animation-delay: .25s;
}
.delay-2 {
animation-delay: .5s;
}
.delay-3 {
animation-delay: .75s;
}
.delay-4 {
animation-delay: 1s;
}
次に、アニメーション要素にクラスを追加するだけです。
<div class="col-md-4 fadeinleft">
<a href="#">
<div class="box-border-wht">
<p>Title 1</p>
<img src="/images/image1.jpg">
</div>
</a>
</div>
<div class="col-md-4 fadeinleft delay-1">
<a href="#">
<div class="box-border-wht">
<p>Title 2</p>
<img src="/images/image2.jpg">
</div>
</a>
</div>
<div class="col-md-4 fadeinleft delay-2">
<a href="#">
<div class="box-border-wht">
<p>Title 3</p>
<img src="/images/image3.jpg">
</div>
</a>
</div>
それだ!
なぜviewportChecker()
、またはjavascript/jQueryを使用しているのかよくわかりません。あなたが投稿した解決策は、jQueryを使用してhidden
cssクラスを要素に追加することです( hidden
は_d-none
_ に置き換えられましたBootstrap 4)ですが、animated
クラスが自動的にこれを処理するため、これは不要です。Animate.cssの目標は、余分なjavascript/jQueryコードなしで効率的でシームレスなアニメーションを提供することです。
Animate.cssはanimation(-name)
cssプロパティを使用して要素をアニメーション化するため、_animation-delay
_ cssプロパティを尊重します。 (上記で説明したように)jQueryコードを完全に削除しても、ソリューションは機能するはずです。