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 で囲めばだいたい幸せ!!
とても参考にさせて頂きました
この記事が気に入ったらサポートをしてみませんか?