Question

我尝试了animate.css库，它在我的localhost和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');
});

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

如何使animate.css（插件）在实时站点加载时立即工作？

1 个答案: