当記事では以下の動画のような動きをVue.jsのトランジションとanimate.cssライブラリを使って実現します。
Animate.cssの使い方【使ったことがある方は飛ばしてください】
Animate.cssを使ったことがない方に簡単に説明します。使い方はとても簡単です。以下のコードをご確認ください。
1 2 3 4 5 6 7 | ① <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css" rel="stylesheet" type="text/css"> …省略… ② <h1 class="animated fadeIn">Hello World!</h1> |
- <head>内にanimate.cssファイルを読み込みます。
- 要素にクラス属性を指定します。クラス属性にはまずanimatedを追加します。次に使用したいアニメーションのクラスを追加します。上のコードではfadeInと指定しています。このfadeInの部分を変更することで様々なアニメーションを適用することができます。もしよろしければ、Animate.cssの公式サイトでアニメーションを確認てみてください。
学習のための事前準備をしよう
以下のソースコードをPCのデスクトップに保存してください。ファイル名はvue-transition.htmlなどのお好きなもので大丈夫です。animate.cssやvue.jsの読み込み等、今回の学習に必要なものを組み込んであります。このソースコードに機能を付け加えていきましょう。
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 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue.jsのトランジションとanimate.cssを組み合わる</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css" rel="stylesheet" type="text/css"> <style> #app { max-width: 400px; margin: 0 auto; padding: 0 1em; } button { background-color: #fff; border: 1px solid #222; border-radius: .2em; padding: .5em 1em; cursor: pointer; color: #222; display: table; margin: 0 auto; } button:hover { background-color: #222; color: #fff; } p { line-height: 1.8; } </style> </head> <body> <div id="app"> <button> Vue.jsのトランジションについて </button> <p>Vue.jsでは、DOMからアイテムが追加、更新、削除されたときのトランジション効果にAnimate.cssのようなサードパーティのCSSアニメーションライブラリと連携することができます。</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', }) </script> </body> </html> |
サンプルのソースコードは直接ブラウザにドラッグ&ドロップすることで実行可能です。または、今後のためにもNode.jsのhttp-serverやVisual Studio CodeのLive Server等でローカル環境に簡易開発サーバを構築する方法を覚えておくと役に立つと思います。
ローカル環境に簡易開発サーバを構築する方法はこちらの記事で解説しています。
Vue.jsのトランジション効果にanimate.cssを連携させてみよう
ボタンクリック時にテキストを表示/非表示する動きを作る
ボタンクリック時にテキストを表示/非表示する動きを作っていきましょう。まずは、Vueのdataオプションにshowプロパティを追加します。
1 2 3 4 5 6 | new Vue({ el: '#app', data: { show: true, }, }) |
次に、button要素にv-onディレクティブを追加します。ボタンをクリックするとshowプロパティに現在の値と逆の値が代入されます。現在の値がtrueであればfalseが代入されます。
1 2 3 | <button @click="show = !show"> Vue.jsのトランジションについて </button> |
最後に、p要素にv-ifディレクティブを追加します。v-ifディレクティブの式はさきほど設定したshowとします。showの値がtrueの場合はp要素が表示され、falseの場合はp要素は表示されません。
1 | <p v-if="show">Vue.jsでは、DOMからアイテムが追加、更新、削除されたときのトランジション効果にAnimate.cssのようなサードパーティのCSSアニメーションライブラリと連携することができます。</p> |
p要素の表示/非表示時にanimate.cssライブラリのアニメーションを適用する
p要素の表示/非表示時にanimate.cssライブラリのアニメーションを適用してみましょう。まずは、transition要素でp要素を囲みます。
1 2 3 | <transition> <p v-if="show">Vue.jsでは、DOMからアイテムが追加、更新、削除されたときのトランジション効果にAnimate.cssのようなサードパーティのCSSアニメーションライブラリと連携することができます。</p> </transition> |
次に、transition要素に属性を追加します。
1 2 3 4 5 | <transition name="custom-classes-transition" enter-active-class="animated flipInY" leave-active-class="animated bounceOut" > |
属性についてご説明します。
name=”custom-classes-transition”はanimate.cssのようなライブラリを使う時に指定します。
enter-active-class=”animated flipInY”では要素を表示する時のアニメーションを指定しています。属性値には先ほど「animate.cssの使い方」でも説明したとおり設定しています。
leave-active-class=”animated bounceOut”では要素を非表示にする時のアニメーションを指定しています。
