Animate.cssとViewportCheckerを使用してアニメーション遅延を追加するにはどうすればよいですか？

Question

Dirk GroenenのDaniel Edenのanimate.cssバージョン3.5.1とjquery-viewport-checkerバージョン1.8.7を使用して、特定のWebページ上の異なるアニメーションクラス要素に「遅延」を追加しようとしています。

は私が...のようなsetTimeout関数を使用する

setTimeout(function() { 
jQuery('.fadeinleft1').addClass("hidden").viewportChecker({ 
    classToAdd: 'visible animated fadeInLeft', 
    offset: 100 
    }); 
}, 500 
); 

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

Answer 1

私が質問するとすぐに、私はCSSを追加するだけの修正を見つける。 javascriptに触れる必要はありません。 animate.cssとviewport-checkerを使用するときに遅延アニメーションを実現するための非常に簡単で簡単な方法。あなたは "アニメーション遅延"を使用するCSSクラスを追加することでそれを行います。

Javascriptを：あなたがする必要があるすべてのその後

.delay-1 { 
animation-delay: .25s; 
} 
.delay-2 { 
animation-delay: .5s; 
} 
.delay-3 { 
animation-delay: .75s; 
} 
.delay-4 { 
animation-delay: 1s; 
} 

を：

jQuery('.fadeinleft').addClass("hidden").viewportChecker({ 
    classToAdd: 'visible animated fadeInLeft', 
    offset: 100 
    }); 

しかし、あなたがしたいとどのように多くのあなたがしたいとあなたがすべてのアニメーションでグローバルにそれらを使用することができ、次のアニメーション遅延CSSを作成します。クラスをアニメーション要素に追加する：

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

それです！