はじめに
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を指定しておくのが無難ですね