CSS3重置動畫需要超時（如果從外部樣式表設置動畫）

Question

我有一個CSS動畫。我將它應用到我的div元素中的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); 

這是非常哈克。有沒有辦法在不使用setTimeout的情況下重置動畫？注意：如果我的超時時間是10ms或更短，它也不起作用。

Answer 1

問題是，您無法刪除類並重新設置，而無需離開瀏覽器進行渲染。

非哈克的方式做，這是一點點複雜：使動畫除去本身

一個快速和骯髒的實現可以是：

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

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

這將刪除動畫類從元素開始，當動畫結束時。之後，您可以重新設置課程，而不會出現問題

fiddle