Vue でモーダルをフワッと出したい消したい

Vue CLI で作成したプロジェクトでモーダルを実装した時に、あれ？これどうするの？となったのが表示非表示をフワッとさせる演出でした

調べたらなるほど〜！だったのでせっかくなので備忘録としてまとめておきます

ので、今回は Vue.js のお話です

実装してみる

フワッと（フェードイン・フェードアウト）させたい要素（今回は Modal コンポーネント）を transition で囲みます

<template>
    <header />
    <main />
    <footer />
    <transition name="component-fade">
        <Modal v-if="show" />
    </transition>
</template>

次に CSS を指定します
component-fade-enter-active, component-fade-leave-active, component-fade-enter, component-fade-leave-to にそれぞれ opacity を指定します

<style>
.component-fade-enter-active,
.component-fade-leave-active {
    transition: opacity .3s ease;
}
.component-fade-enter,
.component-fade-leave-to {
    opacity: 0;
}
</style>

終わりです！！

どういうこっちゃ

Vue が用意してくれている transition ラッパーコンポーネントを使います
この transition に囲われた要素・コンポーネントが挿入されたり削除されたりと切り替わるタイミングで、適用されるアニメーションがないか探したり、ない場合にはトランジションのクラスの付け外しが行われます

トランジションのクラスは何ぞやなんですが、以下の6つの enter / leave トランジション用のクラスのことです

①v-enter : enter の開始状態
②v-enter-active : enter の活性状態
③v-enter-to : enter の終了状態
④v-leave : leave の開始状態
⑤v-leave-active : leave の活性状態
⑥v-leave-to : leave の終了状態

クラスの先頭についている v- ですが、transition 要素に name 属性で命名しておくと、その名前に置き換わります
今回は name="component-fade" と記述したため、各クラスが component-fade-enter, component-fade-leave-to といった感じで置き換わっています

で、CSS での記述内容ですが、挿入の開始時（component-fade-enter）と削除の終了時の状態を指定しています
つまりモーダルを表示する前後ということなので、opacity: 0; でモーダルを透明（＝非表示）にしています

.component-fade-enter,
.component-fade-leave-to {
    opacity: 0;
}

また、挿入中と削除中の opacity の変化の速度を component-fade-enter-active と component-fade-leave-active で指定しています

.component-fade-enter-active,
.component-fade-leave-active {
    transition: opacity .3s ease;
}

文字だけだと伝えづらかったので絵にしてみました。こんな感じ

おまけ ページ遷移をフワッとさせたい

transition で囲むと実現できることはわかりましたが、もう1つ疑問が生じました

Vue Router 使っている時のページ遷移をフワッとさせるのにはどうするんだ...？

こうします

<template>
    <div id="app">
    <transition name="component-fade" mode="out-in">
        <router-view />
    </transition>
    </div>
</template>

router-view を transition で囲めば OK です
ただし、mode="out-in" を加えたのが先ほどのモーダルとは異なる点です

まず、画面遷移にあたり、遷移前の画面と遷移後の画面の2コンポーネントが存在します
そして、transition は enter と leave の動作を並列に行っています

つまり、遷移前の画面の leave と遷移後の画面の enter が同時に行われ、その結果両方が描画される時間があります
トランジションの見栄えとして不自然になり、それを回避するために記述しているのが mode 属性になります

mode 属性には以下の値を指定することができます

in-out : まず新しい要素がトランジションし、その後に現在の要素をトランジションアウトする（あまり使うシーンはない）
out-in : まず現在の要素をトランジションアウトし、その後に新しい要素をトランジションインする

mode="out-in" を指定することで、よりスムーズな見た目のトランジションを実装できます

まとめ

transition で囲めばだいたい幸せ！！

とても参考にさせて頂きました

【VueによるSPA構築】ページ遷移アニメを実装する方法｜たのしいWeb

Enter/Leave とトランジション一覧 — Vue.js