JS控制animation事件

来源：互联网发布：sql查询表列名编辑：程序博客网时间：2024/06/03 22:58

<!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属性，表示距离动画开始已经过去了多少时间

0 0