はじめに

おはようございます。こんにちは。こんばんは。
ワタタクです。
今回はVue.jsのtransitionについて見けいけたらいいなと書いています。
Vue.jsでwebページを作っていく中で「Vue.jsでアニメーションってどうやってつけんの〜?」
と思い調べた結果「transition」を使うと初めて知ったので勉強してみました。
では、早速やってみます。

使い方

transitionタグで囲む

アニメーションさせたい要素をこのようにtransitionタグで囲みます。
このtransitionコンポーネント内の要素に対して、アニメーションなどの動きをCSSで記述していくためのクラスが自動的に付与されます。

※実際に付与されるクラス（CSS）によって動きを制御したい要素には、v-showまたはv-ifディレクティブで表示・非表示する挙動を実装する必要があります。

<transition>
    <div v-show="show" class="box">BOX</div>
</transition>

CSSでスタイルを定義する。

このクラスにCSSでスタイルを定義することがアニメーションをつけることになります。
状態に応じて下記のクラスが付与されます。

クラス	状態
v-enter	enterの開始状態
v-enter-active	enterのアクティブ状態
v-enter-to	enterの終了状態
v-leave	leaveの開始状態
v-leave-active	leaveのアクティブ状態
v-leave-to	leaveの終了状態

ざっくり分けると、表示時はenterで、非表示時はleave系のクラスが付与されます。
これを理解したうえで例としてフェードイン・フェードアウトのスタイルを作成します。

/* アニメーション中のスタイル */
.v-leave-active,
.v-enter-active {
    transition: opacity 1s;
}

/* 表示アニメーション */
.v-enter {
    opacity: 0;
}
.v-enter-to {
    opacity: 1;
}

/* 非表示アニメーション */
.v-leave {
    opacity: 1;
}
.v-leave-to {
    opacity: 0;
}

opacity: 1はデフォルトの値なので省略して、下記のようにもできます。

.v-leave-active,
.v-enter-active {
  transition: opacity 1s;
}
.v-enter,
.v-leave-to {
  opacity: 0;
}

トランジションを複数回使う

複数設置したいときはtransitionにname属性を設定することで、複数のtransitionを区別して利用することができます。
例えばname属性をbasicとした場合、クラス名は`v-をbasic-に置き換えます。

<transition name="basic">
    <div v-show="show" class="box">BOX</div>
</transition>

.basic-enter {
    opacity: 0;
}
.basic-enter-to {
    opacity: 1;
}

初期描画時のトランジション

初期描画時にトランジションで表示することもできます。
その場合はtransitionにappear属性を指定します。

<transition appear>
    <div v-show="show" class="box">BOX</div>
</transition>

2020/03/28追記

上の例ではフェードイン・フェードアウトを紹介しましたがスライドの場合はどうするのか？紹介します。

Bottom Slide

BottomSlide.css

.bottom-enter-active, .bottom-leave-active {
  transform: translate(0px, 0px);
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.bottom-enter, .bottom-leave-to {
  transform: translateY(100vh) translateY(0px);
}

Bottom Left Slide

BottomLeftSlide.css

.bottom-left-enter-active, .bottom-left-leave-active {
  transform: translate(0px, 0px);
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.bottom-left-enter, .bottom-left-leave-to {
  transform: translateY(100vh) translateX(-100vh);
}

Bottom Right Slide

BottomRightSlide.css

.bottom-right-enter-active, .bottom-right-leave-active {
  transform: translate(0px, 0px);
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.bottom-right-enter, .bottom-right-leave-to {
  transform: translateY(100vh) translateX(100vh);
}

Left Slide

LeftSlide.css

.left-enter-active, .left-leave-active {
  transform: translate(0px, 0px);
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.left-enter, .left-leave-to {
  transform: translateX(-100vw) translateX(0px);
}

Right Slide

RightSlide.css

.right-enter-active, .right-leave-active {
  transform: translate(0px, 0px);
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.right-enter, .right-leave-to {
  transform: translateX(100vw) translateX(0px);
}

以上。

最後に

最後まで読んでいただきありがとうございました。
また、これまで紹介してきたのはtransitionを扱う上での基礎なので応用とかは公式サイトを見てください。
もし、間違い等アドバイス、ご指摘等有れば教えていただけたら幸いです。

Vue.jsについての基礎(インストール)
Vue.jsについての基礎(基本構文)
Vue.jsについての基礎(Vue-roter)
もよければご覧下さい。

Vue.jsについての基礎（transitionによるアニメーション）