如何在加载时隐藏动画元素？
如何在加载时隐藏动画元素？
提问于 2014-05-17 16:56:47
我在我的登录页面中使用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);
});如果我的方法是完全错误的，请告诉我？如果是，那么你能提供更好的方法来完成吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-07-12 23:16:34
你只需要用CSS就可以了。
假设您正在尝试为一个标题添加动画效果。为您的元素的类提供以下css：
.title { visibility: hidden; }并为动画类(来自animate.css)提供以下css：
.animated { visibility: visible !important; }当它点击waypoints视图时，它将为Animate.css的每个代码添加.animated，然后它将对动画可见。
Stack Overflow用户
发布于 2015-07-11 03:22:31
通过堆叠类来避免使用!important：
.hidden-load {visibility: hidden;}
.hidden-load.animated {visibility: visible;}Stack Overflow用户
发布于 2016-01-07 15:17:11
你可以用不透明来做这件事。向要影响的div元素添加一个空白类。一旦jquery附加了带有路点的动画类，您就可以通过不透明性使它复活: 1。
.to-be-animated {
opacity: 0;
}
.to-be-animated.animated {
opacity: 1;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23709439
复制相关文章
相似问题
腾讯云开发者
