序章

ページ遷移効果は、アプリケーションのユーザーエクスペリエンスに視覚的な美学を提供します。 JavaScriptは、ドキュメントオブジェクトモデルがロードされたことを検出し、CSSトランジションを適用して「フェードイン」効果を作成するクラスを追加または削除するために使用できます。

この記事では、JavaScriptとCSSを使用してページをフェードインする方法について学習します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

  • の理解 classList オブジェクトが提案されますが、必須ではありません。 詳細については、 classList オブジェクトについては、JavaScriptチュートリアルでCSSクラスを変更する方法を確認してください。

ステップ1—CSSを使用する opacitytransition

まず、ページを開いたときとページをフェードインしたときのCSSルールを作成する必要があります。 この効果は、 opacitytransition プロパティ。 追加および削除することにより fade のクラス body 要素、不透明度をから遷移させることができます 01:

index.html
<head>
  <style>
  body {
    opacity: 1;
    transition-duration: 0.7s;
    transition-property: opacity;
  }

  body.fade {
    opacity: 0;
  }
  </style>
</head>

作成するフェードインコードは、すぐに適用されます fade クラスへ body 要素を作成し、不透明度がないように設定します(0). ページが読み込まれると、 fade からのクラス body 要素を完全な不透明度に設定します(1)の期間にわたって 0.7 秒。

ステップ2—フェードインクラスを適用する

あなたのページで、オープニングの直後 body タグ、割り当てます fade クラスへ body エレメント:

index.html
<body>
  <script>
    document.body.className = 'fade';
  </script>
  <!-- ... -->
</body>

または、 body 要素に既存のクラスが含まれている場合は、 fade を使用したクラス .add() 上のメソッド classList 物体。

あなたの中で index.html ファイル、追加 .add() 方法 classList オブジェクトを挿入し、 fade 引数としてのクラス:

index.html
<body>
  <script>
    document.body.classList.add('fade');
  </script>
  <!-- ... -->
</body>

これにより、 fade 既存のクラスへのクラス。

ステップ3—フェードインクラスを削除する

クラスからフェードイン遷移を削除するために、ドキュメントオブジェクトモデルがロードされたときのイベントリスナーを実装できます。 トランジション効果がリーダーに表示されるように、遅延を実装することもできます。

あなたの中で index.html ファイルを作成し、イベントリスナーを使用して、クラス名を割り当てます。 body 空の文字列の値の要素:

index.html
<body>
  <!-- ... -->
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      window.setTimeout(function() {
        document.body.className = '';
      }, 230);
    });
  </script>
</body>

空の文字列は、ページが読み込まれた後にクラス名を元に戻すようにJavaScriptに指示します。

または、 body 要素に既存のクラスが含まれている場合は、 .remove() 上のメソッド classList 物体:

index.html
<body>
  <!-- ... -->
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      window.setTimeout(function() {
        document.body.classList.remove('fade');
      }, 230);
    });
  </script>
</body>

The .remove() メソッドは削除します fade クラス。

これで、ページをロードすると、最初に fade クラスへ body エレメント。 CSSトランジションは、不透明度をから変更し始めます 01 の間に 0.7 秒。 ページの読み込みが完了すると、 fade クラスはから削除されます body エレメント。

結論

この記事では、JavaScriptとCSSの組み合わせを使用して、ページが読み込まれたときに「フェードイン」効果を作成しました。 使いました opacitytransition 効果を作成します。 次に、DOM操作を使用して、遷移をトリガーするクラスを追加および削除しました。