每次調用JavaScript函數時都會啓動CSS動畫？

我試圖讓CSS3動畫在每次調用函數時都進行動畫處理。每次調用JavaScript函數時都會啓動CSS動畫？

我的動畫的CSS代碼是在一個名爲'enable'的類中，它只是啓動動畫。

我的功能代碼如下：

document.getElementById("red").className = "enable"; 
    setTimeout(function() { 
    document.getElementById("red").className = ""; 
}, 1000);

，使用setTimeout函數，但是當我改變整個函數的代碼來這樣說時，正常工作：

document.getElementById("red").className = ""; 
document.getElementById("red").className = "enable";

它只能一次。

爲什麼我不能刪除該類，然後立即添加它。爲什麼我的第二個代碼和第一個代碼不一樣？

感謝先進！

來源

2014-01-11 novs12

不，我寧願如果我們使用純JavaScript，請！ – novs12

嗯，好的，我想我現在要用setTimeout來做。如果其他人有解決方案來有效實現這一點，請提供！ – novs12

如果包含您的html/css可能會有幫助。

您必須使用setTimeout，否則瀏覽器不夠快速以接受更改。由於JavaScript運行在單個線程中，瀏覽器需要一些呼吸時間才能對課堂變化做出反應。

下面是一個例子：http://jsfiddle.net/brendonparker/75TfR

<!-- CSS --> 
<style> 
    #mydiv { 
     -webkit-transition: all ease 1s; 
     transition: all ease 1s; 
    } 

    #mydiv.enabled { 
     background: red; 
    } 
</style> 

<!-- HTML --> 
<div id="mydiv" > 
    <p>Hello World</p> 
    <p>Test</p> 
</div> 

<!-- JS --> 
<script> 

    function animate(){ 
     var d = document.getElementById('mydiv'); 
     d.className = 'enabled'; 
     setTimeout(function(){ 
      d.className = ''; 
     }, 1000); 
    }  

    animate(); 

</script>

來源

2014-01-11 02:15:42 brendonparker

你的答案的開頭部分正是我的問題的答案！謝謝！ – novs12

每次調用JavaScript函數時都會啓動CSS動畫？

回答

相關問題