Question

这是我的代码：

 <html>
 <head>
 <link rel="stylesheet" href="css/animate.css">
 <style type="text/css">
 .demo{
 background-color:red;
 width:100px;
 height:100px;
 }
 </style>
 <script>

function animateDuration(){
var x = document.getElementsByTagName("div");
setTimeout(function(){x[0]},1000);
}    

</script>
</head>
<body onload="animateDuration();">
<div class="demo animated pulse">Just some text</div>
</body>
</html>

如何在页面加载1秒后使转换生效。我试图通过javascript DOM来做这件事，因为我正在学习DOM。

Answer 1

如果你想做动画，请尝试在javascript之前使用css。

因为您没有包含animate.css文件，并且您没有告诉我们您从何处获得它，所以我必须猜测。我想添加以下css：

.animated {
  -o-transition-delay: 1s;      /* Early Opera */
  -moz-transition-delay: 1s;    /* Early Firefox */
  -webkit-transition-delay: 1s; /* Early Safari or Chrome */
  transition-delay: 1s;
}

它应该添加或覆盖animated类中的设置。也许你需要在上面的css代码中将上面的.animated类更改为.pulse。最糟糕的情况是，使用transition-delay: 1s !important;确保覆盖包含的css文件，但它不是必需的。

Answer 2

1000毫秒后的转换工作

    <html>
 <head>
 <link rel="stylesheet" href="css/animate.css">
 <style type="text/css">
 .demo{
 background-color:red;
 width:100px;
 height:100px;
 transition:1s;
 }

 .pulse{
 background-color:blue;
 width:200px;
 height:200px;
 transition:1s;
 }


 </style>

</head>
<body>
<div id="divid" class="demo">Just some text</div>

<script>
function animateDuration(){
document.getElementById('divid').className = "pulse";
}    
setTimeout(animateDuration,1000);
</script>

</body>
</html>

Answer 3

您需要使用jquery的setInterval方法。让你的documnet准备好之后 var interval = setInterval(function(){ all your animate css animations here }, 3000); 添加了jQuery ... reffer到这个链接：here

如何在页面加载后自行进行转换延迟？

3 个答案: