JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのtransitionPropertyでトランジション効果の対象となるCSSプロパティを設定する方法

JavaScriptでトランジション効果の対象となるCSSプロパティを設定するには、transitionPropertyプロパティを使用します。このプロパティを利用することで、要素のどのCSSプロパティにアニメーション（遷移）効果を適用するかを、スクリプトから動的に指定できます。

transitionPropertyとは

transitionPropertyは、CSSのtransition-propertyプロパティに対応するJavaScriptのスタイルプロパティです。プロパティ名をカンマ区切りで複数指定することもでき、allを指定すればすべての変更可能なプロパティがトランジションの対象になります。

サンプルコード

以下の例では、ボタンをクリックするとDIV2に対して「width」と「height」がトランジション効果の対象として設定されます。その後、DIV2にマウスホバーすると、背景色や角丸は即座に変化しますが、幅と高さのみが3秒かけて滑らかにアニメーションします。

<!DOCTYPE html>
<html>
  <head>
    <style>
      #div1 {
        position: relative;
        margin: 10px;
        height: 300px;
        width: 400px;
        padding: 20px;
        border: 2px solid blue;
      }
      #div2 {
        padding: 80px;
        position: absolute;
        border: 2px solid blue;
        background-color: yellow;
        transform: rotateY(45deg);
        transition: all 3s;
      }
      #div2:hover {
        background-color: orange;
        width: 50px;
        height: 50px;
        padding: 100px;
        border-radius: 50px;
      }
    </style>
  </head>

  <body>
    <p>DIV2にマウスをホバーしてください</p>
    <button onclick="display()"> 設定 </button>
    <div id="div1">DIV1
      <div id="div2">DIV2</div>
    </div>
    <script>
      function display() {
        document.getElementById("div2").style.transitionProperty = "width,height";
      }
    </script>
  </body>
</html>

コードのポイント

  • CSS側ではtransition: all 3s;により、すべてのプロパティ変更が3秒間のトランジション対象になっています。
  • JavaScriptのdisplay()関数内でstyle.transitionProperty = "width,height"と設定することで、対象を幅と高さのみに絞り込んでいます。
  • その結果、ホバー時には背景色・padding・border-radiusは瞬時に変化し、widthとheightだけが3秒かけて滑らかに変化します。

このようにtransitionPropertyを使えば、アニメーションさせたいプロパティを柔軟に制御でき、不要なプロパティへの意図しないトランジション適用を防ぐことができます。

  1. CSSでアニメーションの塗りつぶしモード（animation-fill-mode）を設定する方法

    CSSでアニメーションの塗りつぶしモードを設定する方法CSSでアニメーションの塗りつぶしモードを設定するには、animation-fill-modeプロパティを使用します。このプロパティを使うと、アニメーションの実行時間外（開始前や終了後）に要素へどのスタイルを適用するかを細かく制御できます。animation-fill-modeの主な値none：アニメーションの実行時間外にはスタイルを適用しません（デフォルト値）。forwards：アニメーション終了後も、最後のキーフレームのスタイルが保持されます。backwards：アニメーション開始前（animation-delayによる遅延時間中など）

  2. CSSのtransition-delayプロパティで遷移効果に遅延を設定する方法

    CSSでトランジション（遷移効果）の開始を遅らせたい場合は、transition-delay プロパティを使用します。このプロパティに秒数（s）やミリ秒（ms）を指定することで、変化が始まるまでの待ち時間を自由にコントロールできます。 transition-delayの基本的な使い方 以下のコード例では、マウスホバー時にボックスの幅が変化するトランジションに対して、1秒の遅延を設定しています。実際にコードを実行して、動作を確認してみてください。 サンプルコード <!DOCTYPE html> <html>   <head>  &