JavaScript

Vue.jsのトランジションとcssアニメライブラリを連携する

課題を持った人
課題を持った人
Vue.jsのトランジション効果にCSSアニメーションライブラリを使うことはできますか?
筆者
筆者
はい、できます。CSSアニメーションライブラリと連携するための機能がVue.jsには元々備わっています。今回はAnimate.cssを使用して実装方法を学んでいきましょう。

当記事では以下の動画のような動きをVue.jsのトランジションとanimate.cssライブラリを使って実現します。

 

Animate.cssの使い方【使ったことがある方は飛ばしてください】

Animate.cssを使ったことがない方に簡単に説明します。使い方はとても簡単です。以下のコードをご確認ください。

  1. <head>内にanimate.cssファイルを読み込みます。
  2. 要素にクラス属性を指定します。クラス属性にはまずanimatedを追加します。次に使用したいアニメーションのクラスを追加します。上のコードではfadeInと指定しています。このfadeInの部分を変更することで様々なアニメーションを適用することができます。もしよろしければ、Animate.cssの公式サイトでアニメーションを確認てみてください。

学習のための事前準備をしよう

以下のソースコードをPCのデスクトップに保存してください。ファイル名はvue-transition.htmlなどのお好きなもので大丈夫です。animate.cssやvue.jsの読み込み等、今回の学習に必要なものを組み込んであります。このソースコードに機能を付け加えていきましょう。

サンプルのソースコードは直接ブラウザにドラッグ&ドロップすることで実行可能です。または、今後のためにもNode.jsのhttp-serverやVisual Studio CodeのLive Server等でローカル環境に簡易開発サーバを構築する方法を覚えておくと役に立つと思います。
ローカル環境に簡易開発サーバを構築する方法はこちらの記事で解説しています。

Vue.jsのトランジション効果にanimate.cssを連携させてみよう

ボタンクリック時にテキストを表示/非表示する動きを作る

ボタンクリック時にテキストを表示/非表示する動きを作っていきましょう。まずは、Vueのdataオプションにshowプロパティを追加します。

次に、button要素にv-onディレクティブを追加します。ボタンをクリックするとshowプロパティに現在の値と逆の値が代入されます。現在の値がtrueであればfalseが代入されます。

最後に、p要素にv-ifディレクティブを追加します。v-ifディレクティブの式はさきほど設定したshowとします。showの値がtrueの場合はp要素が表示され、falseの場合はp要素は表示されません。

p要素の表示/非表示時にanimate.cssライブラリのアニメーションを適用する

p要素の表示/非表示時にanimate.cssライブラリのアニメーションを適用してみましょう。まずは、transition要素でp要素を囲みます。

次に、transition要素に属性を追加します。

属性についてご説明します。

name=”custom-classes-transition”はanimate.cssのようなライブラリを使う時に指定します。

enter-active-class=”animated flipInY”では要素を表示する時のアニメーションを指定しています。属性値には先ほど「animate.cssの使い方」でも説明したとおり設定しています。

leave-active-class=”animated bounceOut”では要素を非表示にする時のアニメーションを指定しています。

筆者
筆者
今回は解説ということで比較的派手なアニメーションを使用しましたが、派手なアニメーションは何度も見ると邪魔に感じる方も多いと思うので、実際はもうすこしシンプルなアニメーションを選択する方がいいのかなと個人的には思います。Vue.jsのトランジションとanimate.cssをうまく組み合わせてUX(ユーザー体験)を向上させましょう。