使用Javascript激活CSS3動畫

Question

我正在玩一些CSS動畫，並嘗試使用Javascript onclick觸發動畫。 注意似乎正在為我工​​作。

http://codepen.io/Quinn1011/pen/Eltpk

有人可以看看並幫助我。 我什至無法在頁面加載中隱藏“下一個” div。

Answer 1

將以下行添加到#next的CSS中：

display:none 

哇 ，那很容易，現在下一個節目是在點擊而不是在加載時。

.show()就是刪除css屬性display：none。 就像.hide()向元素添加display：none一樣

如果您了解這一點，那么您將很容易理解動畫是在加載時運行的，因為已經設置了css

所以點擊添加合適的類到您的元素

http://api.jquery.com/addClass/

抱歉，這是jquery-solution，如果您不使用jQuery卻沒有提到它，那么這就是純方法：

function changeClass (elementID, newClass) {
var element = document.getElementById(elementID);

element.setAttribute("class", newClass); 
}

您可以像下面這樣調用此函數：

$('#button').click(function(){
  changeClass('next','anmimate');
 });