【Vue.js】VueとCSSアニメーションを組み合わせる

著者:杉浦

【Vue.js】VueとCSSアニメーションを組み合わせる

 Vue.jsは便利です。テンプレートエンジン同然の動的なDOM操作が簡潔に記述できます。例えばv-ifの様な条件付レンダリングです。
条件付きレンダリング — Vue.js

 デモの様に10行に満たないテンプレートHTMLとVueインスタンス定義で切り替えが実現できます。これは本当に簡潔な記述で、他の記述が紛れる余地がありません。このためDOM操作の際の細やかアニメーションを自らの手で付けようとしてしまいますが(少なくとも自分はそうしました)、実はVue.js自身にアニメーションをサポートする機能がついています。
Enter/Leave とトランジション一覧 — Vue.js
transition – CSS: カスケーディングスタイルシート | MDN
 VueのEnter/Leave とトランジション一覧に記述されている機能は主にCSSのtransitionにDOM操作アニメーションを明け渡すための機能です。発展形としてJavaScriptによる処理を描画中に挟む、データの変化をアニメーションにする、といったものもあります。詳しくはVue公式ガイドのトランジションとアニメーション関連を参照です。
 具体的には

<transition name="fade">
    <p v-if="show">hello</p>
</transition>

 の様にv-ifの様な条件付レンダリング要素をtransitionタグで括ることが第一歩です。transitionタグはVue組み込みのコンポーネントのタグです。このように括るとtransitionタグ内部のv-if属性付きのタグにアニメーションをつけるための要素が適宜定義されます。定義は次の画像にまとまっています。
 
 Enter/Leave とトランジション一覧 — Vue.js#トランジションクラスより引用
 この画像のvの部分にtransitionタグのname属性の値が当てはまり、その文字列のクラスがv-ifの様な表示、描画操作対象タグにつきます。具体的には次の様に使えます。

 CSSのtransitionらしく起点、終点、起点から終点への移動の仕方、のアニメーションを指定します。それぞれ無印、to、activeが当てはまります。デモのslideならばmax-heightの値を0.5秒で0から5em、5emから0へ線形的に変形させています。

  • この記事いいね! (1)

著者について

杉浦 administrator