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

【问题标题】：How to hide animated elements on load?如何在加载时隐藏动画元素？
【发布时间】：2014-05-17 08: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>

我想为每个元素添加动画延迟，以便它们fadeInUp 在每个元素中使用animation-delay 属性在指定的秒数之后彼此之后。我不能让它工作。我在不使用动画延迟的情况下尝试了以下代码，但没有成功。

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

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

【问题讨论】：

标签： jquery jquery-waypoints animate.css

【解决方案1】：

您只需使用 CSS 即可。

假设您正在尝试为标题设置动画。给你元素的类这个 css：

.title { visibility: hidden; }

并给动画类（来自 animate.css）这个 css：

.animated { visibility: visible !important; }

当它到达航点视图时，它会为每个 animate.css 的代码添加 .animated，然后它将对动画可见。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以使用不透明度来做到这一点。向您想要影响的 div 元素添加一个空白类。一旦 jquery 将动画类与航点附加在一起，您就可以通过不透明度使其恢复生机：1.

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

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

【讨论】：

【解决方案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;
}

【讨论】：