Vue Academy · レッスン

リストアニメーションのためのTransitionGroup

Q: 「リストアニメーションのためのTransitionGroup」で何を学びますか？

v-forのリストのアニメーション、移動トランジション、delayを使った段階的なアニメーションについて学習します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

v-forのリストのアニメーション、移動トランジション、delayを使った段階的なアニメーションについて学習します。

レッスン 4/413 ステップ

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

リストをアニメーションさせる

<Transition>は単一の要素を処理します。v-forで描画するリストには<TransitionGroup>を使用すると、項目の追加、削除、並べ替えをアニメーションさせられます。

tagプロパティ

Transitionとは異なり、TransitionGroupは実際のラッパー要素を描画できます。tag="ul"（または任意のタグ）を渡すと、リスト項目を囲むその要素が出力されます。

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</TransitionGroup>

すべての項目にkeyが必要

各項目に一意の:keyを指定することが必須です。Vueはこれを使って、どの項目が移動、追加、削除されたかを追跡します。アニメーションするリストのkeyに配列のインデックスを決して使用しないでください。

<li v-for="item in items" :key="item.id">{{ item.text }}</li>

enterクラスとleaveクラス

TransitionGroupでは、Transitionと同じenterクラスとleaveクラスを使用します。項目ごとの表示と削除のために、これらを定義してください。

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

特別なmoveクラス

特に重要なのが-moveクラス（例：list-move）です。項目の順序が変わると、Vueはtransformのトランジションを使って、それぞれの項目を新しい位置まで滑らかにアニメーションさせます。

.list-move {
  transition: transform 0.4s ease;
}

FLIP手法

-moveの内部ではFLIPが使われています。First（最初に）古い位置を記録し、Last（最後に）新しい位置を読み取り、Invert（反転）でtransformを適用して動いていないように見せ、最後にPlay（再生）でtransformを削除します。Vueがこれを自動的に行います。

/* Vue computes: translate(oldX - newX) then animates to 0 */

削除中の項目には絶対配置が必要

削除される要素は、削除が完了するまで空間を占有するため、周囲の項目のmoveアニメーションが壊れることがあります。leave-activeクラスにposition: absoluteを設定し、削除中の項目をレイアウトフローから外してください。

.list-leave-active {
  position: absolute;
}

並べ替え可能なリストの例

enter、leave、moveの各クラスを組み合わせると、Vueが追加、削除、並べ替えをすべて同時にアニメーションさせます。

function shuffle() {
  items.value = items.value
    .slice()
    .sort(() => Math.random() - 0.5);
}

transitionDelayで段階的に表示する

項目を1つずつ順番に表示するには、項目のインデックスに基づいてインラインのtransition-delayをバインドします。各項目は、前の項目より少し長く待機します。

<li
  v-for="(item, i) in items"
  :key="item.id"
  :style="{ transitionDelay: i * 50 + 'ms' }"
>
  {{ item.text }}
</li>

JSフックで段階的に表示する

データに基づく段階的な表示には、JSフックとdata-index属性を使う方法もあります。要素のインデックスに応じて各onEnterを遅延させます。

function onEnter(el, done) {
  const delay = el.dataset.index * 50;
  setTimeout(() => {
    el.style.opacity = 1;
    done();
  }, delay);
}

パフォーマンスに関する注意点

FLIPはGPUと相性のよいtransformをアニメーションさせます。リストのサイズは適度に保ち、滑らかな60fpsの動きのために、widthやtopのようにレイアウトを発生させるプロパティよりもtransformやopacityを優先してください。

クイックチェック

list-moveクラスによって何が可能になりますか。

対話的なレッスンで答える

振り返り

リストに使う<TransitionGroup>について学びました。tagでラッパーを描画し、すべての項目に一意の:keyを指定します。また、FLIPに基づく並べ替えアニメーションにはenter/leaveクラスと-moveクラスを使い、削除中の項目は絶対配置にし、インデックスに基づくtransitionDelayで段階的な表示を作成します。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 42
レッスン: 156

無料で学習を始めるコース全体を表示

よくある質問

「リストアニメーションのためのTransitionGroup」レッスンは無料ですか？

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

「リストアニメーションのためのTransitionGroup」で何を学びますか？

v-forのリストのアニメーション、移動トランジション、delayを使った段階的なアニメーションについて学習します。ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「リストアニメーションのためのTransitionGroup」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Vue Academyに戻る