如何让javascript控制css3的animation和transition，让css3反复执行
1个回答
展开全部
通过按钮的click事件反复触发一个元素的css3动画，点击一次，动画效果就跑一次。
看码——
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>测试页面</title>
<script id="jquery_183" type="text/javascript" src="//runjs.cn/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="testDiv01">
</div>
<button id="testBtn01">反复触发transition</button>
<br>
<div id="testDiv02">
</div>
<button id="testBtn02">反复触发animation</button>
</body>
javascript：
let [testDiv01,testDiv02,testBtn01,testBtn02]=[$('#testDiv01'),$('#testDiv02'),$('#testBtn01'),$('#testBtn02')];
testBtn01.on('click',function () {
testDiv01.addClass('transi');
let t = setTimeout(()=>{
testDiv01.removeClass('transi');
clearTimeout(t);
},500);
});
testBtn02.on('click',function () {
testDiv02.addClass('ani');
let t = setTimeout(()=>{
testDiv02.removeClass('ani');
clearTimeout(t);
},500);
});css：
body {
padding: 20px;
}
.testDiv {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #e0a718;
}
.testDiv.ani {
-webkit-animation: pop 200ms ease 0ms;
animation: pop 200ms ease 0ms;
}
.testDiv.transi {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
}
.testBtn {
margin-top: 20px;
height: 30px;
padding: 0px 10px;
border: 1px solid #CCCCCC;
}
@-webkit-keyframes pop {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes pop {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
