【メモ】【Vue.js】transitionタグの使い方

##Vue.jsのtransitionタグとは？
Vue.jsの独自タグ。HTMLファイルの中で使用し、transitionタグで囲むとアニメーションをつけることができる。

CSSのtransitionプロパティがアニメーション全般に使用できるのに対し、transitionタグはDOMの追加時と削除時に使用できる。

<transition>
    <!-- アニメーションさせたい要素を書く -->
</transition>

##transition-groupタグ
transition-groupタグで囲うことで複数の要素をアニメーションさせることができる。

<transition-group>
    <!-- アニメーションさせたい要素を書く -->
</transition-group >

##CSSトランジション
アニメーションは予め用意されたcss名で設定する必要がある。

/*現れる時*/
/*現れる前の状態*/
.v-enter { プロパティ: 値;}

/*現れる間の動き*/
.v-enter-active { プロパティ: 値;}

/*現れた後の状態*/
.v-enter-to { プロパティ: 値;}

/*消える時*/
/*消える前の状態*/
.v-leave { プロパティ: 値;}

/*消えている間の動き*/
.v-leave-actiove { プロパティ: 値;}

/*消えた後の状態*/
.v-leave-to { プロパティ: 値;}

/*移動中*/
/*移動中の動き*/
.v-move { プロパティ: 値;}

###参考文献：

1. 【Vue.js】transitionタグでアニメーション効果をつける
2. Vue.js の transition ってなに？