如何用js使得一个已经结束的css的animation动画重新执行一遍

希望给出一个示例代码最好。。... 希望给出一个示例代码最好。。 展开
 我来答
千锋教育
2016-04-21 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI&UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
展开全部
可以试试移除动画的类再重新给节点添加动画的类
下面这个demo是执行一次动画,2s后再重新执行一遍
(因为是demo,我就没有考虑兼容性问题,没有添加css前缀)

1

<div class="dot anm" id="anm"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.dot {
position: relative;
width: 100px;
height: 100px;
margin: 100px;
border-radius: 50%;
background: #000;
}
.anm {
animation: move 1s forwards;
}
@keyframes move
{
from {
left:0px;
}
to {
left:200px;

setTimeout(function() {
var dom = document.getElementById('anm');
dom.className = 'dot';
setTimeout(function() {
dom.className = 'dot anm';
}, 10);
}, 2000);
夜独行孤单
2016-03-09 · TA获得超过3460个赞
知道大有可为答主
回答量:2803
采纳率:82%
帮助的人:639万
展开全部
<html>
<head>
<style>
@keyframes longer {
from {width: 100px;}
to {width: 200px;}
}
@-moz-keyframes longer {
from {width: 100px;}
to {width: 200px;}
}
@-webkit-keyframes longer {
from {width: 100px;}
to {width: 200px;}
}
@-o-keyframes longer {
from {width: 100px;}
to {width: 200px;}
}
#animator {
width: 100px;
height: 100px;
background: red;
}
.animation {
animation: longer 0.5s;
-moz-animation: longer 0.5s;
-webkit-animation: longer 0.5s;
-o-animation: longer 0.5s;
}
</style>
</head>
<body>
<div id="animator" class="animation"></div>
<script>
var animator = document.getElementById('animator');
animator.addEventListener('animationend', endHandler);
function endHandler() {
animator.removeEventListener('animationend', endHandler);
animator.className = '';
setTimeout(function () {
animator.className = 'animation';
}, 0);
}
</script>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式