Vue Academy · レッスン

CSSトランジションとアニメーション

CSSのtransitionプロパティ、キーフレームアニメーション、Vue TransitionでのAnimate.cssの利用について学習します。

「CSSトランジションとアニメーション」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

CSSでアニメーションする2つの方法

CSSには、Vueのトランジションと組み合わせるのに最適な2つの機能があります。transitionプロパティは2つの状態の間を補間し、@keyframesとanimationは複数段階のタイムラインを定義します。Vueではどちらも動かせます。

transitionのショートハンド

transitionショートハンドを使うと、プロパティ、期間、タイミング関数、遅延を1行にまとめられます。順番は、プロパティ、期間、イージング、遅延です。

.box {
  /* property duration easing delay */
  transition: transform 0.4s ease-in-out 0s;
}

複数のプロパティをトランジションする

複数のトランジションはカンマで区切ります。transformとopacityを同時にアニメーションさせると、スライドとフェードを組み合わせた効果を作れます。

.slide-enter-active,
.slide-leave-active {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
.slide-enter-from {
  transform: translateX(20px);
  opacity: 0;
}

transitionだけでは足りない場合

transitionは2つの状態の間だけをアニメーションさせます。バウンド、パルス、複数段階の動きには、多数の中間地点を定義できる@keyframesが必要です。

キーフレームを定義する

@keyframesでは、パーセンテージ（またはfrom/to）を使って状態のシーケンスに名前を付けます。それぞれの停止点で、その時点のタイムラインにおけるスタイルを記述します。

@keyframes bounce-in {
  0% { transform: scale(0); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

animationプロパティ

animationショートハンドでキーフレームのセットを適用します。指定するのは、名前、期間、タイミング関数、遅延、反復回数、方向です。

.bounce-enter-active {
  animation: bounce-in 0.5s ease both;
}

キーフレームをTransitionに組み込む

animationをenter-activeクラスに指定すると、挿入時に再生されます。退出時には、同じキーフレームを逆方向で実行します。

.bounce-leave-active {
  animation: bounce-in 0.5s ease reverse both;
}

Animate.cssを使う

Animate.cssは、すぐに使えるキーフレームアニメーションのライブラリです。独自のクラスを書く代わりに、custom-classプロパティを介してAnimate.cssのクラスを直接使うようVueに指示します。

<!-- after importing animate.css -->
<!-- classes like animate__fadeIn are predefined -->

enter-active-classとleave-active-class

<Transition>では、生成されるクラス名を上書きするプロパティを指定できます。enter-active-classとleave-active-classを使うと、任意の外部クラスを組み込めます。Animate.cssに最適な方法です。

<Transition
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <div v-if="show">Animated by Animate.css</div>
</Transition>

期間を明示的に設定する

アニメーションとトランジションが組み合わさってCSSのタイミングが不明確な場合は、durationプロパティを設定して、クラスを削除する正確なタイミングをVueに知らせます。数値、またはenterとleaveを持つオブジェクトを指定できます。

<Transition :duration="{ enter: 500, leave: 300 }">
  <div v-if="show">Precise timing</div>
</Transition>

イージング関数が重要な理由

タイミング関数によって、動きの印象が変わります。ease-outは入場時に反応がよく感じられ、ease-inは退出時に適しています。cubic-bezier()を使えば完全に制御できます。

.pop-enter-active {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

確認テスト

入場時にAnimate.cssのクラスを適用できるプロパティはどれですか？

振り返り

transitionのショートハンド（2状態間の補間）と、@keyframesにanimationを組み合わせた方法（複数ステップのタイムライン）を比較しました。また、enter-active-classおよびleave-active-classプロパティを使ってAnimate.cssを組み込み、durationでタイミングを正確に指定する方法を学びました。

よくある質問

「CSSトランジションとアニメーション」レッスンは無料ですか？

はい。「CSSトランジションとアニメーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「CSSトランジションとアニメーション」で何を学びますか？

CSSのtransitionプロパティ、キーフレームアニメーション、Vue TransitionでのAnimate.cssの利用について学習します。ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「CSSトランジションとアニメーション」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る