如何使用Animate.css和ViewportChecker添加动画延迟？

我正在尝试使用Daniel Eden的animate.css版本3.5.1和Dirk Groenen的jquery-viewport-checker版本1.8.7为特定网页上的不同动画类元素添加“延迟”。如何使用Animate.css和ViewportChecker添加动画延迟？

我试图用setTimeout函数一样......

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

但是，这显然影响了隐藏类为好。我只需要动画延迟，因为它到达视口，我可以相应地延迟每个对象。一直在寻找，只是找不到答案。

来源

2016-08-26 James

去图中，只要我问一个问题，我发现一个修复只涉及到添加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>

就是这样！

来源

2016-08-26 16:48:51 James

如何使用Animate.css和ViewportChecker添加动画延迟？

回答

相关问题