javascript - 如何使 animate.css(plugin) 在实时站点加载时立即工作？

Question

我尝试了 animate.css 库，它在我的本地主机和 jsfiddle 中运行良好，但在实时站点中它没有立即采取行动，这意味着特定 div 的动画选项不会在开始时发生，而是 div 出现在指定的位置首先位置然后它来自顶部或我给出的任何效果。

我认为这可能是服务器加载时间问题。可能是由于加载缓慢，我可以先看到实际位置，然后再进行 css 类动画。我不确定如何克服这个问题。

Jsfiddle使用与现场网站相同的代码，但在 js 中它工作正常。

我尝试直接在标记本身而不是通过 js 给出类，因为我认为 js 可能最近加载，即使我可以看到加载网站时的静态位置然后动画从上到下发生

<div id="box" class="animated fadeInDownBig">Checking</div>

js方式我也试过了，没效果。知道这里发生了什么吗？

Answer 1

这是因为您的 div html 代码会在您调用时立即在浏览器中呈现

$(document).ready(function(){
  $('#box').addClass('animated fadeInDownBig');
});   

文档加载后。因此，在文档加载后根据您的代码工作很简单，它添加了动画 fadeInDownBig 效果。如果您使用的库只是简单的 CSS 文件，那么我会建议您使用它，而不是在文档加载后调用

<div id="box" class="animated fadeInDownBig">Checking</div>

如果您的库中有其他 js 文件等，请使用此代码

#box {
width:60%;
height:60%;
left:20%;
top:20%;
background-color:red;
position:fixed;
display:none;
}

<div id="box" class="animated">Checking</div>

$(document).ready(function(){

  $('#box').css('display','block').addClass('fadeInDownBig');
});   

就您所说的它在您的本地主机上运行良好而言，这可能是因为它会立即在本地主机上加载每个库和文件，因此会立即调用 $(document).ready。