Question

我在目标网页中使用animate.css与waypoints.js。我想在用户滚动页面时为元素设置动画。但是，问题是我需要在动画开始之前隐藏元素（如果我不隐藏，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; }

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

Answer 2

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

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

Answer 3

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

select [PRIORITY],[amount],[case] from Table
order by [PRIORITY], [CASE] asc,AMOUNT desc

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

3 个答案: