css3动漫恶性事件—webkitAnimationEnd与计时器time恶性

2021-01-20 11:54 jianzhan
用css3的animation进行1个动漫,当仅有这个动漫进行时才实行令1个恶性事件,例如让动漫维持在停止的情况或别的1些恶性事件。大家应该怎么办呢。
第1种方式
用计时器,设置1个和动漫时长1样的time,过time恶性事件去实行这个涵数。
setTimeout(function(){ },time);
第2种方式
当-webkit-animation动漫完毕时有1个webkitAnimationEnd恶性事件,要是监视这个恶性事件便可以了。
事例:

拷贝编码
编码以下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf⑻">
<meta name="author" content="@my_programmer">
<title>webkitAnimationEnd</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no"/>
<style type="text/css">
#div{
width:200px;
height:200px;
background:#f60;
margin:100px auto;
-webkit-transition: all ease 1s;
}
.change{
-webkit-animation: transform 1s 2 ease;
}
@-webkit-keyframes transform {
% { -webkit-transform: scale(1)}
% { -webkit-transform: scale(2)}
% { -webkit-transform: scale(0.5)}
% { -webkit-transform: scale(1)}
}
</style>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
var tt = document.querySelector('#div');
tt.addEventListener("click", function(){
this.className = 'change';
}, false);
tt.addEventListener("webkitAnimationEnd", function(){ //动漫完毕时恶性事件
this.className = this.className.replace('change', ' ');
console.log(2);
}, false);
</script>
</body>
</html>

扩展
1、-webkit-animation动漫实际上有3个恶性事件:
刚开始恶性事件 webkitAnimationStart
完毕恶性事件 webkitAnimationEnd
反复健身运动恶性事件 webkitAnimationIteration
你能够在上个事例中检测1下这两个恶性事件

拷贝编码
编码以下:

tt.addEventListener("webkitAnimationStart", function(){ //动漫刚开始时恶性事件
console.log(1);//动漫刚开始时,操纵台輸出1
}, false);
tt.addEventListener("webkitAnimationIteration", function(){ //动漫反复健身运动时的恶性事件
console.log(3);//第1遍姿势进行时,操纵台輸出3
}, false);

2、css3的过渡特性transition,在动漫完毕时,也存在完毕的恶性事件:webkitTransitionEnd;
留意:transition,也仅唯一这1个恶性事件。