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

Question

我在着陆页中使用带有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元素之前,这很有效.这是我想要实现的解释.我有这样的元素:

<ul>
 <li>element1</li>
 <li>element2</li>
 <li>element3</li>
</ul>

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

$('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; }

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

Answer 2

避免使用!important堆叠类:

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