JS控制animation事件

最新推荐文章于 2024-08-08 07:28:22 发布

kongjunchao159

最新推荐文章于 2024-08-08 07:28:22 发布

阅读量6.4k

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/kongjunchao159/article/details/47317431

版权

CSS3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/reset.css" />
<title></title>
<style>
#div1{width:100px; height:100px; background-color:#F00;}
.slidein{-webkit-animation-duration:3s; -webkit-animation-name:slidein; -webkit-animation-iteration-count:3; -webkit-animation-direction:alternate;}
@-webkit-keyframes slidein{
   from {margin-left:100%;}
   to {margin-left:0%;}
}
</style>
</head>
<body>
<div id="div1"></div>
<ul id="output"></ul>
<script>
function listener(e){
   var l = document.createElement("li");
   switch(e.type){
       case "webkitAnimationStart":
           l.innerHTML = "开始：" + e.elapsedTime;
           break;
       case "webkitAnimationEnd":
           l.innerHTML = "结束：" + e.elapsedTime;
           break;
       case "webkitAnimationIteration":
           l.innerHTML = "迭代一次：" + e.elapsedTime;
           break;
   }
   document.getElementById("output").appendChild(l);
}
function setup(){
   var e = document.getElementById("div1");
   e.addEventListener(" webkitAnimationStart",listener,false);
   e.addEventListener(" webkitAnimationEnd",listener,false);
   e.addEventListener(" webkitAnimationIteration",listener,false);
   e.className = "slidein";
}
setup();
</script>
</body>
</html>

注释：
webkitAnimationStart       动画开始时触发
webkitAnimationEnd         动画结束时触发
webkitAnimationIteration   动画每迭代一次触发一次该事件
这三种类型的事件对象中都有一个elapsedTime属性，表示距离动画开始已经过去了多少时间