【Vue.js】transitionのin-outとout-inの表示結果デモ

はじめに

Vue.jsのtransitionタグの属性であるin-outとout-inの動きの違いが分かるデモを作ってみました。

公式ドキュメントはこちら。

環境

- OS: macOS Catalina 10.15.1
- Vue: 2.6.10

基本構文

<transition mode="out-in">
  <!-- ... the buttons ... -->
</transition>

このmodeの値をin-out、out-inどちらにするかで表示が変わります。

指定なし

See the Pen LYERjdZ by terufumi (@terufumi1122) on CodePen.

in-out

最初に新しい要素がトランジションして、それが完了したら、現在の要素がトランジションアウトする。

See the Pen wvBzPJG by terufumi (@terufumi1122) on CodePen.

out-in

最初に現在の要素がトランジションアウトして、それが完了したら、新しい要素がトランジションインする。

See the Pen XWJjzME by terufumi (@terufumi1122) on CodePen.

おわりに

最後まで読んで頂きありがとうございました

特に意図が無ければout-inを指定しておくのが無難ですね

参考にさせて頂いたサイト（いつもありがとうございます）

Enter/Leave とトランジション一覧 — Vue.js