は、CSSアニメーションの再生時間は、私は、CSS <a href="http://codepen.io/HipsterBrown/pen/eyrIJ" rel="nofollow noreferrer">CodePen Example</a></p> <p>を使用してdiv要素のためのフリップ効果を追加しようとしています。しかし変更は、私はジャバスクリプトを通じて動的にCSSアニメーションを追加しようとするだろうということになります。動的

Question

を追加します。

これは私が試したものです。変換プロペティが機能しているように見えますが、アニメーションが表示されるまでのアニメーションの時間は機能していません。その部分の提案。私は正しく追加していますか？

  $('body').html('<div class="card-container"><div id = "myDiv" class="flipper"><div class="front"> <h1>Hello</h1></div><div id="backDiv" class="back"> <h1>World</h1></div></div></div>'); 



      document.getElementById("myDiv").style.transform = "rotateX(360deg)" 
      document.getElementById("myDiv").style.WebkitTransform = "rotateX(360deg)" 
      document.getElementById("myDiv").style.msTransform = "rotateX(360deg)"; 
      document.getElementById("backDiv").style.transform = 'rotateX(180deg)'; 

      document.getElementById("myDiv").style.transition = 'transform 6s ease-out' 

https://jsfiddle.net/Lsvwyx0c/

Answer 1

あなたは要素を作成すると同時に、そのプロパティを変更しています。移行する変更はありません。

移行するには、ブラウザに要素がレンダリングされている必要があります。次に、要素を新しい値に変更する必要があります。

遅延、短くても1は、十分でしょう：

function change() { 

    document.getElementById("myDiv").style.WebkitTransform = "rotateX(360deg)" 
    document.getElementById("myDiv").style.msTransform = "rotateX(360deg)"; 
    document.getElementById("myDiv").style.transform = "rotateX(360deg)"; 
    document.getElementById("backDiv").style.transform = 'rotateX(180deg)'; 
    document.getElementById("myDiv").style.transition = 'transform 6s ease-out' 
};     

window.setTimeout (change, 5); 

fiddle