Question

我有一个CSS动画。我将它应用于我的div元素中具有类span的span。我从外部样式表中应用它：

.skill > span { width:100%; -moz-animation:anim-skill 2s ease-out; -webkit-animation:anim-skill 2s ease-out; }

.anim-skill {width:100%; animation:anim-skill 2s ease-out; -moz-animation:anim-skill 2s ease-out; -webkit-animation:anim-skill 2s ease-out; -o-animation:anim-skill 2s ease-out;}

@keyframes anim-skill { from {width:0px;} to  {width:100%} }

当我想在运行时重置动画时，我这样做：

var mySkill = document.querySelector('.skill');
var bar = mySkill.childNodes[0];
//make it "from" state
bar.style.animation = 'none';
mySkill.style.width = 0;

//make it run
setTimeout(function () {
    mySkill.style.width = '';
    bar.style.animation = '';
}, 20);

这非常hacky。有没有办法在不使用setTimeout的情况下重置动画？注意：如果我的超时时间是10毫秒或更短，它也不起作用。

Answer 1

问题是你无法删除该类并重新设置它，而无需让浏览器自行渲染。

非hacky这样做的方法有点复杂：让动画自行删除

快速而肮脏的实现可以是：

$(document).ready(function() {
    var ele = document.getElementById("test");

    ele.addEventListener( 'webkitAnimationEnd', 
    function( event ) { ele.className = ""; }, false );
})

这将在动画结束时从元素中删除动画类。之后，您可以再次设置课程，没有问题

fiddle

CSS3重置动画需要超时（如果从外部样式表设置动画）

1 个答案: