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

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>

我希望对每个元素添加动画延迟，以便它们使用animation-delay属性在指定的时间后一起fadeInUp。但我无法让它起作用。我尝试了以下代码，但没有成功。

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

如果我的方法完全错误，请告诉我？如果是的话，那么您能提供更好的完成方式吗？

- Ejaz Karim

Answer 1

你可以仅使用CSS来完成它。

假设您正在尝试为标题添加动画效果，请为该元素的类添加以下CSS：

.title { visibility: hidden; }

给动画类（来自animate.css）添加以下CSS：

.animated { visibility: visible !important; }

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

- user3319362

Answer 2

避免使用!important，可以通过堆叠类来实现：

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

- isherwood

Answer 3

你可以通过不透明度来实现这个。给你想要影响的 div 元素添加一个空类。一旦 jQuery 附加了动画类和路标，你就可以使用不透明度: 1 将其恢复活力。

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

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

- PattyCreates

Answer 4

您可以使用CSS和关键帧在加载时隐藏元素，然后延迟一段时间后显示并进行动画处理：

// keyframes fadeIn Animation
@keyframes fadeIn {
    0% {
        transform:scale(0,0);
        visibility:visible;
        opacity:0;
    }
    100% {
        transform:scale(1,1);
        visibility:visible;
        opacity:1;
    }
}
// CSS class
.containerDiv {
    visibility:hidden;
    animation: fadeIn 3s forwards 3s;
}

- Ateeb Asif