如何在加载时隐藏动画元素？

我在着陆页中使用带有waypoints.js的 animate.css 。 我想在用户滚动页面时为元素设置动画。 但是，问题是我需要在动画开始之前隐藏元素（如果我不隐藏，animate.css首先隐藏元素然后动画，看起来非常难看）。

但是，我通过在我的CSS中添加两个类来解决问题，但它产生了另一个问题。

.visible{ opacity: 1; } .invisible {opacity: 0; } // I added following jquery code $('elem').removeClass('invisible').addClass('visible fadeInUp'); 

这在我向元素添加animation-delay之前一直有效。 这是我想要实现的解释。 我有这样的元素：

 
 
element1
 
element2
 
element3
  

我想为每个元素添加动画延迟，以便它们使用animation-delay属性在每个元素中以指定的秒数相互fadeInUp 。 我不能让这个工作。 我尝试使用代码而不使用动画延迟但没有成功。

 $('elem').each(function() { // code with delay using timeout setTimeout(function(){ $(this).removeClass('invisible').addClass('...'); }, 100); }); 

如果我的方法完全错误，请告诉我？ 如果是，那么你可以提供更好的方法来完成。

Answer 1

你只能用CSS做到这一点。

假设您正在尝试为标题制作动画。 给你的元素类这个css：

 .title { visibility: hidden; } 

并给动画类（来自animate.css）这个css：

 .animated { visibility: visible !important; } 

当它到达航点视图时，它将根据animate.css的代码添加.animated ，然后它将对动画可见。

Answer 2

通过堆叠类避免使用!important ：

 .hidden-load {visibility: hidden;} .hidden-load.animated {visibility: visible;} 

Answer 3

你可以用不透明的方式做到这一点。 将空白类添加到您想要影响的div元素。 一旦jquery使用路标点附加动画类，您就可以使用不透明度恢复生命：1。

 .to-be-animated { opacity: 0; } .to-be-animated.animated { opacity: 1; }