收到动画片后,停止动画。这样的东西(使用jQuery):
CSS
@-webkit-keyframes rotate {
to {
-webkit-transform: rotate(360deg);
}
}
.rotate {
width: 100px;
height: 100px;
background: red;
}
.rotate.anim {
-webkit-animation-name: rotate;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
HTML
TEST
JS
$("#stop").click(function() {
$(".rotate").one('animationiteration webkitAnimationIteration',function() {
$(this).removeClass("anim");
});
});
请注意,我使用.one这里(而不是.on),以便处理程序只运行一次。这样,动画可以稍后重新启动。
本文介绍了一种使用jQuery实现动画暂停及之后能够重新启动的方法。通过监听动画结束事件并在动画完成一次迭代后移除动画类的方式,实现了动画的暂停。同时,通过使用.one()确保处理程序仅运行一次,便于后续重新激活动画。

被折叠的 条评论
为什么被折叠?



