javascript - CSS3 重置动画需要超时(如果从外部样式表设置动画)

Question

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

.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 );
})

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

fiddle