web-dev-qa-db-ja.com

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
);

しかし、それは明らかに隠しクラスにも影響します。ビューポートに到達するときにアニメーションだけを遅らせる必要があり、それに応じて各オブジェクトを遅らせることができます。いつか探していて、まだ答えが見つかりません。

jquerycssanimationviewport
6
James

図を見てください。質問するとすぐに、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>

それだ！

14
James

なぜ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コードを完全に削除しても、ソリューションは機能するはずです。

1
Chad