Javascript 如何使animate.css（插件）在现场加载时立即工作？

我尝试了animate.css库，该库在我的localhost和jsfiddle中运行良好，但在live site中它没有立即采取行动，这意味着特定div的animate选项不会在开始时发生，而是div首先出现在指定的位置，然后从顶部出现，或者我给出的任何效果

我认为这可能是服务器加载时间问题。可能是由于加载速度慢，我可以先看到实际位置，然后css类动画就开始了。我不知道如何克服这一点

代码与实时站点中的代码相同，但在js中运行良好

我试图通过js直接在标记本身中提供类，因为我认为js可能会在最近加载，即使我可以看到加载站点时的静态位置，然后动画从上到下进行

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

检查

---

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

这是因为您的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');
});   

#框{
宽度：60%；
身高：60%；
左：20%；
最高：20%；
背景色：红色；
位置：固定；
显示：无；
}
检查
$（文档）.ready（函数（）{
$（'#box'）.css（'display'，'block'）.addClass（'fadeInDownBig'）；
});   

---

就您所说的在本地主机上工作正常而言，这可能是因为它会立即在本地主机上加载每个库和文件，所以$（document）。ready会立即调用。

当我重新加载时，它会立即向下滑动。我自己也说过这一点。它在js fiddle中工作，但不在live siteOk中，我误解了你的问题。在你的评论和彻底的重读之后，我明白了。是的，这就是为什么我尝试使用标记而不是js，就像这样

检查

，尽管没有立即生效。谢谢你。我试过不使用js，只是单独标记，但不起作用，但用小提琴这种方式它起作用了你试过我上面说的另一种方式吗，显示=无，然后在js显示=块？刚才我试过了，不知道你的答案，这很好，欢迎你@孙：你愿意为我的微笑投我一票吗？