Jak dodać opóźnienie animacji za pomocą Animate.css i ViewportChecker?

Question

Próbuję dodać "opóźnienie" do różnych animowanych elementów klas na konkretnej stronie internetowej za pomocą programu animate.css w wersji 3.5.1 autorstwa Daniela Eden'a i wersji 1.8.7 programu jquery-viewport autorstwa Dirka Groenena.

Próbowałem użyć funkcji setTimeout jak ...

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

Ale to oczywiście wpływa na klasę, jak również ukryte. Potrzebuję animacji opóźnionej, gdy osiągnie ona obszar wyświetlania i mogę odpowiednio opóźnić każdy obiekt. Szukałem kiedyś i po prostu nie mogę znaleźć odpowiedzi.

Answer 1

Idź, jak tylko zadam pytanie, znajdę poprawkę, która wymaga tylko dodania css. Nie trzeba dotykać javascript. Bardzo szybki i łatwy sposób na uzyskanie opóźnionej animacji podczas korzystania z programu animate.css i sprawdzania widoku. Robisz to, dodając klasę css, która używa "opóźnienia animacji".

Javascript:

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

Utwórz następujący animowany opóźnienia css jednak chcesz i ile chcesz i można z nich korzystać na całym świecie na wszystkich animacji:

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

Wtedy wszystko, co trzeba zrobić dodaje klasy do animowanych elementów jako takich:

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

To jest to!