Vue.js入門第18回。今回はアニメーションで利用するトランジションについて確認してみます。
はじめに
Vue.jsではトランジション（アニメーション）の機能も提供されています。
サンプルとしてボタンを押したらフェードイン、フェードアウトしながら表示非表示が切り替わるものを作成してみます。
Vue.jsでアニメーションを利用したい時はtransitionタグを使います。対象の要素をtransitionタグで括るとその要素にトランジション用のclassが付与されます。このclassはトランジション中だけ付与され終了すると自動的に外れます。
v-ifやv-showディレクティブの場合、表示になるタイミングで「v-enter-active」というクラスが常時付与され、更に１フレーム目のみ「v-enter」クラスが付与され、2フレーム目以降は「v-enter-to」クラスが付与されます。そして、トランジションが終わるとこれらのクラスがまとめて削除されます。
非表示も同様で、非表示になるタイミングで「v-leave-active」というクラスが常時付与され、更に１フレーム目のみ「v-leave」が、２フレーム目以降は「v-leave-to」クラスが付与されます。トランジションが終わると自動で外れます。
ソースコード
解説
v-enter-active、v-enter-leaveクラスにトランジションの期間を設定しています。
表示のタイミングで1フレーム目のみに適用されるv-enterクラスの特性を利用して透明にし、2フレーム目で外れるので結果的にフェードイン動作になります。
非表示のタイミングでは2フレーム目以降に付与されるv-leave-toクラスでフェードアウト動作を実現しています。
えず
東京でフリーランスのWebエンジニアやっています。 今はPHPとGoをメインに、プライベートでは広く浅くをモットーにフロント〜インフラまで学習しています。 当面の目標はDevOps寄りのオールラウンダー。
