javascript - 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 を使用しておらず、言及していない場合は、それが jquery ソリューションになります。純粋な方法は次のとおりです。

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

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

この関数は次のように呼び出すことができます。

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