Vue.jsで簡単に要素へアニメーションを追加できるtransitionを使う
最終更新日: Update!!
動的にコンテンツや要素などを切り替える際にアニメーションをつけたい時もあるかと思います。Vue.jsではそのような時のためにトランジションを使って手軽に効果をつけることができるものが用意されています。今回はVue.jsのtransitionタグを使ってアニメーションを実装するケースを見ていきたいと思います。
いかがでしょうか、Vue.jsでは動的にコンテンツやデータ、要素などが切り替わるためUIの観点からもアニメーションが求められるケースも多いかと思います。そんな時にはこのtransitionタグがとても便利ですね。
transitionタグで要素にトランジション効果を加える
このtransitionタグですが、対象の要素を内包するように記述することで専用のclass名がトランジションの経過に合わせて動的に付与される仕組みになります。ただし、DOMの再描画が行われるタイミングでしか機能しないので注意が必要です。今回はサンプルとしてボタンのクリックで要素の表示と非表示が切り替わるような例で見ていきます。 【Vue】<template> <div id="app"> <button v-on:click="display_switch()">click!!</button> <div>ボタンクリックで表示・非表示が切り替わる要素です </div> </div> </template> <script> export default { data: function() { return { show: false } }, methods: { display_switch: function() { this.show = !this.show } } } </script>実装も簡単で、先ほどの通りアニメーションさせたい要素をtransitionタグで囲むだけでOKです。その後CSSなどでトランジション効果のスタイルを指定します。 【Vue】
<template> <div id="app"> <button v-on:click="display_switch()">click!!</button> <transition> <div>ボタンクリックで表示・非表示が切り替わる要素です </div> </transition> </div> </template> <script> ..... 省略 </script> <style lang="scss"> .v-enter-active { transition: all 1.0s ease 0s; } .v-leave-active { transition: all 0.3s ease 0s; } .v-leave-active { position: absolute; } .v-enter, .v-leave-to { opacity: 0; } .v-enter { transform: translateX(-60px); } .v-enter-to, .v-leave { transform: translateX(0); } .v-leave-to { transform: translateX(60px); } </style>実際に動くサンプルを用意しましたので見てみましょう。いかがでしょうか、こうして比べてみると違いがよくわかりますね。
See the Pen Vue.js transition sample by designsupply (@designsupply) on CodePen.
先ほどCSSでスタイルを指定するとありましたが、トランジションの経過に合わせたclass名が自動で付与されますので、class名を把握しておく必要があります。下記にトランジション時に使われるclass名をまとめていますので、これらに合わせてスタイルを指定していきます。v-enter-active | 要素が表示される間の状態で付与されるclass (要素のDOMへ追加〜Enterトランジションの実行) |
---|---|
v-enter | 要素がDOMに追加される直前からEnterトランジションが始まるまでの間に付与されるclass |
v-enter-to | Enterトランジションが始まり要素がDOMから削除されるまでの間に付与されるclass |
v-leave-active | 要素が削除される間の状態で付与されるclass (Leaveトランジションの実行〜要素のDOMから削除) |
v-leave | Leaveトランジションが始まる直前までの間に付与されるclass |
v-leave-to | Leaveトランジションが始まり終了するまでの間に付与されるclass |
transitionタグのオプションでトランジションのタイミングを調整
トランジション効果でアニメーションを実装できるtransitionタグですが、トランジションのタイミングも指定することができます。デフォルトではEnterのトランジションとLeaveのトランジションが同時に始まりますが「mode」属性でオプションを指定することで変更が可能です。 【Vue】※一部抜粋<transition mode="in-out"> </transition>mode属性で使えるオプションは下記のものが用意されています。指定しない場合にはデフォルトの仕様が適用されます。
(デフォルト) | EnterのトランジションとLeaveのトランジションが同時に実行される |
---|---|
in-out | Enterのトランジションの終了後にLeaveのトランジションを実行する |
out-in | Leaveのトランジションの終了後にEnterのトランジションを実行する |
ループで複数の要素を出力している要素へのトランジション
v-forなどで複数要素がループで出力されている要素に対しては「transition-group」タグを使います。ただし下記の点に注意しておきましょう。 ・デフォルトでラッパー要素がspanになるので、指定のタグがある場合にはtag属性にて設定する。 ・v-forで展開する要素にはkey属性の指定が必須となる 実際のコードの例は次のようになります。これでループで動的に出力された要素に対しても全てトランジションが適用されるようになりました。 【Vue】※一部省略<template> <div id="app"> <transition-group tag="ul"> <li v-for="item of items" v-bind:key="item.id">{{ item.name }} </li> <transition-group> </div> </template>
いかがでしょうか、Vue.jsでは動的にコンテンツやデータ、要素などが切り替わるためUIの観点からもアニメーションが求められるケースも多いかと思います。そんな時にはこのtransitionタグがとても便利ですね。
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories