【Vue.js】transition ラッパーは単一要素/コンポーネントで使うと言う話とか

Vue.js のtransitionについて。
単一要素はtransitionで複数要素はtransition-groupと言う単純な覚え方ではアカンと思ったので、覚書。

前置き

transitionは Vue.js で、
遷移とか移り変わりの表現をいい感じにしてくれるラッパーコンポーネントである。
要素のフェードイン / フェードアウトを簡単に実装する事が出来るので、そう言う例が多く見られるが、

要するにvueが用意してくれているトランジションクラス（v-enterとかv-leaveとか）を用いて、要素がDOMに追加、更新、削除される意図したタイミングでアニメーションを指定する事が出来る。

本題

transitionでラップ出来るのは次のようなケース
・条件付きの描画 (v-if を使用)
・条件付きの表示 (v-show を利用)
・動的コンポーネント
・コンポーネントルートノード (Component root nodes)

で、これらは単一要素/コンポーネントである事が条件としてあると言う事。

<!-- これはダメ -->
<transition>
  <div v-if="show">message1</div>
  <div v-if="show">message2</div>
</transition>

対象が単一要素であれば良いので、これなら問題ない。
（まあ普通はこっちになると思うけど）

<!-- これは良い -->
<transition>
  <div v-if="show">
    <div>message1</div>
    <div>message2</div>
  </div>
</transition>

またパターンをifや動的プロパティで表現する時に複数要素を指定するのは問題ない。

<!-- これは良い -->
<transition>
  <button v-if="show === 'message1'" key="message1">
    message1
  </button>
  <button v-if="show === 'message2'" key="message2">
    message2
  </button>
  <button v-if="show === 'message3'" key="message3">
    message3
  </button>
</transition>

つまり、条件の単一要素と言うのは「独立したノード」又は「一度に1つのみ描画される複数ノード」であれと言う事。

またtransition-groupでも使う時に注意が必要な点がある。
ドキュメントにも重要であると書かれており、使う上で直ぐに気づくと思うが、v-forで回す要素をspanでラップする形でDOMが形成される。

これはtag属性で指定する事でspan以外のタグを設定する事が出来るが、場合によってはコーディングに影響が出るので注意が必要。

<transition-group name="list" tag="p">
  <span v-for="item in items" v-bind:key="item" class="list-item">
    {{ item }}
  </span>
</transition-group>