#6 トランジションとアニメーション

S28トランジションとは

とても便利に洗練されたアニメーションが使えるものです

基本的なトランジションの使い方

transitonタグで囲みます
<transition>
  <div v-show=”show”>トランジションさせたい要素</div>
</transition>

スタイルを定義して動かしてみよう

CODE PEN
showプロパティを使って要素の状態をトグルしてみましょう。
「ふわっと表示されて、ふわっと消えていく」

v-showだけでなく、v-ifでもできる。

animationプロパティを使うときの面倒なやり方から解放される!

トランジションクラス名とクラスのプレフィックス

各トランジションクラス名、デフォルトでv-がつく。
でもname属性で名前指定ができます。
複数トランジションを使うときに区別できて便利ですね。

初期描画時にもトランジションを行う

デフォルトでは描画後の切り替えからトランジションが行われますが、
<transition>, <transition-group>タグにappear属性をつけることで、
初期描画時にもトランジションを行えます。
つまり…初期からふわっとできる

S29単一要素トランジション

タグ内に一つ存在する要素に使用できる。

単一要素トランジションで使用するトランジションクラス

EnterLeaveという二つのフェーズが存在する。

追加されるときは、.v-enter から .v-enter-to
削除されるときは、.v-leave から .v-leave-to

何も付与されていなければ、デフォルトのoppacity:1になるので、
.v-enter-to.v-leaveは省略可能。

EnterとLeaveで別々のスタイルを定義する

CODE PEN

複数の要素をグループ化する

TrueとFalseを切り替えることで、
二つの要素が入れ違いに出てくるアニメーションを作りたいときとか。

でも実行するとずれて表示されてしまう…
CODE PEN
重ねることで違和感をなくす。