https://jp.vuejs.org/v2/guide/transitions.htm
v-show, v-if時にアニメーションを使って要素を表示非表示したい場合には、Vue.jsのtransitionをまず試してみましょう。
<template>
<transition name="fade">
<div v-if="show">
transition
</div>
</transition>
</template
<style>
.fade-enter {}
.fade-enter-active {}
.fade-enter-to {}
</style>
nameを設定すると、style指定で特別なクラス名を利用できます。
codepen
See the Pen MWaXerx by Junya Suzuki (@jszk) on CodePen.
transitionの使い方
表示
v-enter：開始状態
v-enter-active：トランジション中
v-enter-to：終了状態
非表示
v-leave：開始状態
v-leave-active：トランジション中
v-leave-to：終了状態
トランジションモード
in-out
新しい要素がトランジション完了してからアウトする
out-in
現在の要素がトランジション完了してからインする
リストでtransitionを使いたい時はtransition-group
リスクの用に複数要素に対してtransitionを利用したい場合はtransition-groupを利用する
<template>
<transition-group name="fade" tag="ul">
<li v-if="show">
transition
</li>
</transition>
</template>
tag属性を指定しないとspanタグが表示されてしまうので注意。liタグのtransitionの場合は、tag属性にulを指定すると作りやすいです。
注意点
transitionタグの中には1つしか親タグを1つしかおいてはいけない
transition-groupではトランジションモードがつかえない
transiton-groupを使う時にはkey属性が必須