トランジショングループ ​

<TransitionGroup> は、リスト内にレンダリングされた要素およびコンポーネントの挿入、削除、順序の変更などをアニメーション化するために設計された組み込みコンポーネントです。

<Transition> との違い ​

<TransitionGroup> は <Transition> と同じ props、CSS トランジションクラス、JavaScript フックをサポートしますが、以下の違いがあります:

• デフォルトでは、ラッパーの要素はレンダリングされません。しかし、tag props でレンダリングする要素を指定することができます。

• トランジションモードは、排他的な要素同士を交互にトランジションすることがなくなったので、利用できません。

• 内部の要素は 常に ユニークな key 属性を設定する必要があります。

• CSS トランジションクラスはグループ / コンテナ ではなく、リストの個々の要素に適用されます。

Enter / Leave トランジション ​

以下は <TransitionGroup> を用いて、v-for リストに enter / leave トランジションを適用する例です:

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

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

移動のトランジション ​

上のデモには明らかな欠陥があります: 項目を挿入または削除すると、上下の項目がスムーズに移動するのではなく、即座に "ジャンプ" して移動します。これを解決するには、いくつかの CSS ルールを追加します:

.list-move, /* 移動する要素にトランジションを適用 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* leave する項目をレイアウトフローから外すことで
   アニメーションが正しく計算されるようになる */
.list-leave-active {
  position: absolute;
}

これで挙動が良くなりました - リスト全体がシャッフルされるときのアニメーションもスムーズです。

完全な例

時差をもたせたリストのトランジション ​

JavaScript のトランジションとデータ属性でやりとりすることで、リスト内のトランジションをずらすこともできます。まず、項目のインデックスを DOM 要素の data 属性としてレンダリングします:

<TransitionGroup
  tag="ul"
  :css="false"
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @leave="onLeave"
>
  <li
    v-for="(item, index) in computedList"
    :key="item.msg"
    :data-index="index"
  >
    {{ item.msg }}
  </li>
</TransitionGroup>

そして、JavaScript のフックで、data 属性に応じた遅延を持たせて要素をアニメーションさせます。この例では、GSAP ライブラリーを使ってアニメーションを行います:

function onEnter(el, done) {
  gsap.to(el, {
    opacity: 1,
    height: '1.6em',
    delay: el.dataset.index * 0.15,
    onComplete: done
  })
}

関連

• <TransitionGroup> API リファレンス