Vue.jsにはtransitionという機能があり、これを使うと簡単にアニメーションを実装することができます。ボタンを押したときのコンテンツの表示・非表示などのアニメーションで活躍します。
Contents
transitionの書式（HTML）
基本的な使い方はアニメーションを設定したい要素を<transition>タグで囲みます。
[要素がひとつの場合]
|
0 1 2 3 4 |
<transition> <!-- アニメーションさせる要素 --> </transition> |
[要素が複数の場合]
|
0 1 2 3 4 |
<transition-group> <!-- アニメーションさせる要素のリスト --> </transition-group > |
HTMLを作成したら、CSSを設定します。
transitionの書式（CSS）
transitionではCSSの設定が用意されています。出現時と消滅時に3つずつ決められたclass名があります。その他、移動中のCSSも用意されています。アニメーション実行時にHTMLに自動的にclass名が付くので、それに対するCSSを指定すればOKです。
出現時のCSS
|
0 1 2 3 4 5 6 7 8 9 10 |
/*出現時*/ /*出現前*/ .v-enter { プロパティ: 値;} /*出現中*/ .v-enter-active { プロパティ: 値;} /*出現後*/ .v-enter-to { プロパティ: 値;} |
消滅時のCSS
|
0 1 2 3 4 5 6 7 8 9 10 |
/*消滅時*/ /*消滅前*/ .v-leave { プロパティ: 値;} /*消滅中*/ .v-leave-actiove { プロパティ: 値;} /*消滅後*/ .v-leave-to { プロパティ: 値;} |
移動中のCSS
|
0 1 2 3 |
/*移動中*/ .v-move { プロパティ: 値;} |
transitionによるアニメーション実例
表示切り替えのボタンを押すと文字が出現・消滅する機能を実装してみます。transitionでアニメーション効果を付けています。
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<html> <head> <meta charset="utf-8" /> <title>vue hello world!(component ver)</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button @click="show=!show"> 表示切替 </button> <transition> <div v-if="show"> transitionによるアニメーション </div> </transition> </div> <script> new Vue({ el: '#app', data: { show: true, }, }); </script> </body> </html> <style> /* 出現時 */ .v-enter { opacity: 0; } .v-enter-active { transition: opacity 1.5s; } .v-enter-to { opacity: 1; } /* 消滅時 */ .v-leave { opacity: 1; } .v-leave-active { transition: opacity 1s; } .v-leave-to { opacity: 0; } </style> |
[表示部分HTML]
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<div id="app"> <button @click="show=!show"> 表示切替 </button> <transition> <div v-if="show"> transitionによるアニメーション </div> </transition> </div> |
div id名appで全体を囲みます。
ボタンを作成します。
<button @click=”show=!show”>の@clickはv-on:clickと同じ意味です。@の書き方は短く書くことができるのでVueでは多く使われます。
show=!showの書き方は表示・非表示を実装する時に良く使われます。trueとfalseの2つの切替のとき、showに逆を代入するという意味です。
<transition>
<div v-if=”show”>
transitionによるアニメーション
</div>
</transition>
がアニメーションをさせたい部分になります。
[Vueインスタンス]
こちらは定番のソースです。data:にはshow:trueを指定しておきます。
[CSS]
ここで出現時と消滅時の設定をしています。
これでボタンをクリックすると文字がフワッと現れたり消えたりします。
[表示例]
