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

JavaScriptでtransitionの4つのプロパティを設定する方法

JavaScriptで要素にトランジション（遷移）効果を適用するには、transitionプロパティを使用します。これは、以下の4つの個別プロパティを一括して設定できるショートハンドです。

  • transitionProperty … トランジションを適用するCSSプロパティの名前
  • transitionDuration … トランジションが完了するまでの所要時間
  • transitionTimingFunction … 変化の進行速度（イージング）を制御する関数
  • transitionDelay … トランジションが開始されるまでの遅延時間

これらを個別に指定することもできますが、style.transition = "all 2s" のようにまとめて記述すれば、「すべてのプロパティが2秒かけて変化する」という設定を1行で行えます。

サンプルコード

以下のコードを実行すると、JavaScriptでトランジションの各プロパティを設定する流れを確認できます。「Set」ボタンをクリックするとDIV2にトランジションが設定され、その後にマウスオーバーした際の色やサイズの変化が滑らかにアニメーションします。

<!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);
         }
         #div2:hover {
            background-color: orange;
            width: 50px;
            height: 50px;
            padding: 100px;
            border-radius: 50px;
         }
      </style>
   </head>
   <body>
      <p>DIV2にマウスカーソルを合わせてください</p>

      <button onclick = "display()">Set</button>

      <div id = "div1">DIV1
         <div id = "div2">DIV2</div>
      </div>
   
      <script>
         function display() {
            document.getElementById("div2").style.transition = "all 2s";
         }
      </script>
   </body>
</html>

動作のポイント

  • ボタンをクリックすると、display()関数が呼び出され、DIV2のstyle.transitionに「all 2s」が設定されます。
  • 「all」はすべてのCSSプロパティが対象であることを意味し、「2s」がtransitionDuration（所要時間2秒）に相当します。
  • トランジション設定後、DIV2にマウスオーバーすると、背景色・幅・高さ・角丸の変化が2秒かけてなめらかにアニメーションします。

なお、より細かく制御したい場合は、transitionProperty、transitionDuration、transitionTimingFunction、transitionDelayをそれぞれ個別に指定することも可能です。

  1. JavaScriptで要素のマージンを設定する方法をわかりやすく解説

    JavaScriptで要素のマージンを設定するには、marginプロパティを使用します。このプロパティを使うと、要素の外側の余白（マージン）を上下左右の4辺まとめて指定することができます。marginプロパティの基本的な使い方JavaScriptでは、element.style.marginに値を代入することでマージンを設定できます。値は「上・右・下・左」の順に半角スペースで区切って指定するのが基本です。サンプルコード以下の例では、ボタンをクリックすると段落要素の4辺すべてにマージンが設定されます。実際にコードをコピーしてブラウザで実行し、動作を確認してみてください。<!DOCTYPE

  2. JavaScriptで1つの宣言ですべてのアウトラインプロパティを設定する方法

    要素にアウトライン（外枠線）を設定するには、CSSの outline プロパティを使用します。このプロパティを使うことで、アウトラインの色・スタイル・幅（オフセット）をまとめて指定できます。outlineプロパティの基本JavaScriptからは element.style.outline に対して値を代入することで、個別のプロパティ（outlineColor や outlineStyle など）を分けて指定する必要なく、1つの宣言だけですべてのアウトライン設定を一度に行えます。値は「幅 スタイル 色」の順で半角スペース区切りで記述します。サンプルコード以下のコードでは、ボタンをクリックすると