Javascriptで生成されたHTMLに影響しないCSSトランジション

私は、ホバー上のオブジェクトを回転させるCSS変換をしています。Javascriptで生成されたHTMLに影響しないCSSトランジション

.rotate { transition: 0.2s; } 
.rotate:hover { transform: rotate(20deg); }

これは、ハードコードされたHTML要素に適用すると完全に正常に機能します。

しかし、このページには、より多くのHTMLを生成してdivに挿入するスクリプトが含まれています（div.innerHTML = newHTML）。

CSSのトランジションは、スクリプトによって生成された要素では機能しません。

なぜこれが当てはまり、どのように修正できますか？

編集：ここでは、私のコードを示す単純な例ですが、例を得ることができません。ハードコーディングされた回転と生成されたHTMLは回転しません。

<!doctype html> 
    <head> 
     <style> 
      .rotate { 
       transition: 0.2s; 
      } 

      .rotate:hover { 
       transform: rotate(20deg); 
      } 
     </style> 
    </head> 
    <body> 
     <a class="rotate" href="#">A test text</a> 
     <div id="plot"></div> 
     <script> 

      function makeHTML() 
      { 
       return '<a class="rotate" href="#">I am a HTML link</a>'; 
      } 

      var plot = document.getElementById('plot'); 

      var text = makeHTML(); 

      plot.innerHTML = text; 

     </script> 
    </body> 
</html>

出典

2017-07-28 Nonnisi

あなたのコード –

のスニペットを追加してください、それを再現することはできません〜https://jsfiddle.net/6Lpvaooc/。 JavaScriptが正しいクラスを新しい要素に追加していることを確認してください。 – Phil

あなたの説明は技術的に可能ではありません。それらのクラスがあり、CSSのより特定のセレクタによって適用されるルールによって 'transition'および' transform'プロパティがオーバーライドされない場合、指定したものが適用されます。これを把握する最も簡単な方法は、追加された要素を調べ、 "Computed"（ "Styles"の近く）タブに行き、その要素の 'transition'と' transform'プロパティで何が指定されているか確認します。また、どのルールがそれらを設定するかを示します。 [mcve]がなければ、これ以上あなたを助けることはできません。 –

transformは、ブロックレベル要素にのみ適用されます。既定では、<a>の要素はdisplay:inlineです。 transformが機能するためですから、display: inline-block;を適用する必要があります。

function makeHTML() { 
 
    return '<a class="rotate" href="#">I am a HTML link</a>'; 
 
} 
 

 
var plot = document.getElementById('plot'), 
 
    text = makeHTML(); 
 

 
plot.innerHTML = text;

.rotate { 
 
    transition: 0.2s; 
 
    display: inline-block; 
 
} 
 

 
.rotate:hover { 
 
    transform: rotate(20deg); 
 
}

<a class="rotate" href="#">A test text</a> 
 
<div id="plot"></div>

出典

2017-07-28 00:41:57

Javascriptで生成されたHTMLに影響しないCSSトランジション

答えて

関連する問題