Animate.css ve ViewportChecker kullanarak animasyon gecikmesi nasıl eklenir?

Question

Ben Dirk Groenen tarafından Daniel Eden'in animate.css versiyonu 3.5.1 ve jquery-viewport denetleyicisi sürümü 1.8.7 kullanarak belirli bir web sayfasında farklı animasyon sınıf elemanlarına bir "erteleme" eklemeye çalışıyorum.

ben ... gibi setTimeout İşlevini kullanmak

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

çalıştı Ama bu tabii ki de gizli sınıfını etkilemektedir. Görüntüleme portresine ulaştığı anda gecikmiş canlandırmaya ihtiyacım var ve her bir nesneyi buna göre geciktirebiliyorum. Bir ara aradım ve henüz cevabı bulamıyorum.

Answer 1

Git şekil, bir soru sorduğunda, yalnızca css eklemeyi içeren bir düzeltme buluyorum. Javascript'e dokunmanıza gerek yok. Animate.css ve viewport-checker kullanırken gecikmeli animasyon elde etmek için çok hızlı ve kolay bir yol. Bunu "animasyon gecikmesi" kullanan bir css sınıfı ekleyerek yaparsınız.

JavaScript: yapmanız gereken tüm Ardından

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

Ancak istiyorum ve kaç İstediğiniz ve tüm animasyonlar üzerinde global olarak kullanabilirsiniz aşağıdaki animasyonlu gecikme css oluşturma Sınıflandırmayı, animasyonlu öğelere şu şekilde ekleyebilirsiniz:

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

Bu doğru!