Vueを学ぶ

第10章. Vueのトランジションとアニメーション

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

これまで、適切なステート管理によるルートやデータフローの処理など、動作するVueアプリケーションを構築するための重要な側面について説明してきた。この章では、ユーザ体験を向上させるためのVue独自の機能であるアニメーションとトランジションについて、トランジション・コンポーネント、フック、CSSを使用して説明する。

CSSトランジションとCSSアニメーションを理解する

CSSアニメーションは、特定の要素やコンポーネントの状態変化による視覚的要素であり、状態の数に制限はない。CSSアニメーションは、明示的なトリガーなしに自動的に開始し、ループに入ることができる。対照的に、CSSトランジションは、ボタンの平均からホバー、ツールチップの非表示から表示といった、2つの状態間の変化のみに反応するアニメーションである。CSSアニメーションを定義するには、多くの場合、@keyframes 規則を使用し、それをターゲット要素に適用するにはanimationプロパティを使ってターゲット要素に適用する。例えば、 のような単純なアニメーション効果を定義することができる：

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.5);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

.button {
  animation: pulse 2s infinite;
  box-shadow: 0px 0px 1px 1px #0000001a;
}

シンプルなアニメーション・エフェクト、pulse を定義し、button クラスを持つ要素に適用した。ボックス・シャドウがループで拡大・縮小し、2秒間続く。このエフェクトは、要素がDOMに存在すれば無限ループする。

図10-1. 不定パルスのアニメーション効果

一方、transition プロパティを使用して、ユーザが特定の要素にマウスを合わせたときの遷移効果を定義することができる ：

.button {
  transition: background-color 0.5s ease-in-out;
}

.button:hover {
  background-color: #ff0000;
}

このコードでは、button 要素にシンプルなトランジション効果を作成している。背景色は、0.5 秒の遅延で、ホバーリング時にデフォルトの色から赤に変わり、ease-in-out のスムージング効果を持つ。また、JavaScript やその他のアニメーションライブラリを使用して、JavaScript を使用してトランジションやアニメーションをプログラムで定義することもできる 。

トランジションとアニメーションは、ユーザがアプリケーションを使用する際に非常にスムーズな体験を提供する。しかし、トランジションやアニメーションを扱うことは、時に困難な場合がある。Vueはビューレイヤーにフォーカスしたフレームワークとして、CSSやJavaScriptを使ってコンポーネントやルートにスムーズで美しいアニメーションやトランジション効果を作成するためのAPIセットを提供している。そのひとつが ...