如何在加载时隐藏动画元素? [英] How to hide animated elements on load?
问题描述
我正在将 animate.css 与
I'm using animate.css with waypoints.js in my landing page. I want to animate elements when user scrolls the page. But, the problem is that I need to hide elements before the animation starts(if i don't hide, animate.css hides element first and then animates in, that looks pretty ugly).
但是,我通过在CSS中添加两个类解决了问题,但这又带来了另一个问题.
However, I solved problem by adding two classes in my css but it creates another problem.
.visible{ opacity: 1; }
.invisible {opacity: 0; }
// I added following jquery code
$('elem').removeClass('invisible').addClass('visible fadeInUp');
这很好,直到我将animation-delay
添加到元素中为止.这是我要实现的解释.我有这样的元素:
This works good until I add animation-delay
to an elements. Here is an explanation what I want to achieve. I've elements like this:
<ul>
<li>element1</li>
<li>element2</li>
<li>element3</li>
</ul>
我想为每个元素添加动画延迟,以便它们在每个fadeInUp
之后使用animation-delay
属性在每个元素中指定的秒数.我无法使它正常工作.我尝试了以下代码,但未使用动画延迟,但未成功.
I want to add animation delay to each of the elements, so that they fadeInUp
after each other with a specified seconds in each of the elements using animation-delay
property. I can't get this to work. I tried following code without using animation-delay but no success.
$('elem').each(function() {
// code with delay using timeout
setTimeout(function(){
$(this).removeClass('invisible').addClass('...');
}, 100);
});
让我知道我的方法是否完全错误?如果是,那么您可以提供更好的方法来实现这一目标.
Let me know if my approach is completely wrong? If yes, then can you provide better way to accomplish.
推荐答案
您只能使用CSS做到这一点.
You can do it with only CSS.
假设您要制作标题的动画.给您的元素的类这个CSS:
Let's say you are trying to animate a title. Give your element's class this css:
.title { visibility: hidden; }
并给动画类(来自animate.css)这个CSS:
and give the animated class (which comes from the animate.css) this css:
.animated { visibility: visible !important; }
当它到达航路点视图时,它将在animate.css的代码中添加.animated
,然后对于动画是可见的.
When it hits the waypoints view it will add .animated
per animate.css's code and then it will be visible for the animation.
这篇关于如何在加载时隐藏动画元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!