トランジション
トランジション効果をかけたい要素を transition ラッパーコンポーネントで囲む
<transition name="fade"> <p v-if="show">hello</p> </transition>
トランジションのスタイルを指定する
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
参考：
Enter/Leave とトランジション一覧 — Vue.js [公式]
CSS transitionで頑張らないVue.js transition – Qiita
Vue.jsのTransitionでいい感じのアプリにする – Qiita
Vue.js でたのしいトランジション 通常編 | Cubix
Vue.js でたのしいトランジション リスト編 | Cubix
トランジションクラス
- v-enter
- v-enter-active
- v-enter-to
- v-leave
- v-leave-active
- v-leave-to
参考：
トランジションクラス – Enter/Leave とトランジション一覧 — Vue.js [公式]
appear
参考：