Vue.jsのtransitionによるアニメーションの基礎を学ぶ

2019年5月25日

Vue.jsには、要素の表示・非表示の挙動においてアニメーションを実装していくtransition(トランジション)と呼ばれる機能があります。本記事ではフェードイン・フェードアウトを実装することによって、基本的なアニメーションの実装の流れを説明していきます。

 

 

基本的なtransitionの実装手順


 

まずは基本的なフェードイン・フェードアウトの実装から、実装手順を説明します。

 

サンプル1

1.  transitionタグで囲む

まずトランジションを適用したい範囲をtransitionタグで囲み、transitionコンポーネントを作成します(23〜25行目)。このコンポーネント内の要素に対して、アニメーションなどの動きをCSSで記述していくためのクラスが自動的に付与されます。

 

2. v-show/v-ifディレクティブの適用

実際に付与されるクラス(CSS)によって動きを制御したい要素には、v-showまたはv-ifディレクティブで表示・非表示する挙動を実装する必要があります(24行目)。このディレクティブの機能によってクラスを切り替えていく機能が自動で割り当てられます

 

3. クラス(CSS)を記述する

付与されるクラスは大まかに「Enterフェーズ」と「Leaveフェーズ」の2つに分類されます。この2つのフェーズは、v-showおよびv-ifディレクティブの機能によって切り替わっていくように処理されます。サンプル1ではボタンをクリックするとちょうど下記のイラストの流れ(左から右)でクラスが適用されていきます。

 

はじめは.v-enterで文字はopacityがゼロの透明状態です。ボタンを1回クリックすると.v-enter-activeの処理が走り(3秒間)、そして.v-enter-toとなり文字が表示されます。ボタンをもう1回クリックすると.v-leave-active、そして.v-leave-toへと至ります。

 

.v-enter-toと.v-leaveはデフォルトでopacity: 1なので、CSSとしてのスタイルには記述していません。

 

 

 

上記のイラストをまとめた表です。

クラス名 タイミング
 .v-enter  Enter開始(要素が追加される前)
 .v-enter-active   Enter開始後に実行されている間 (要素が追加されている間)
 .v-enter-to  Enter完了(要素が追加された時)
 .v-leave  Leave開始(要素が削除される前)
 .v-leave-active  Leave開始後に実行されている間 (要素が削除されている間)
 .v-leave-to  Leave完了(要素が削除された時)

 

 

 

クラス名のプレフィックス(transitionの区別)


 

サンプル1では1つのtransition(コンポーネント)のみでしたが、複数のtransitionを区別して利用するには、タグに例えば「name=”hoge”」というようにname属性を付加します。これによって、hogeをプレフィックスとしたクラスが生成されるようになります。

 

サンプル2

36行目

name属性にrainを記述しています。このrainがクラス名のプレフィックスとなり、例えば「.rain-enter-active」のように記述してデフォルトの「.v-enter-active」と区別することができます。

 

 

 
appearで画面描画時にtransitionを実行する


 

サンプル1と2共にボタンをクリックすることによるv-showの切り替えによってtransitionによる動きが確認されましたが、transitionタグにappear属性を付与すると、ページがはじめに表示される(DOMが描画される)段階でtransitionが実行されるようになります。

 

サンプル3

 

 

 

カスタムトランジションクラス(Custom Transition Classes)


 

上述してきたtransitionでは .v-enter や .v-enter-active のように自動的に生成されるクラス名を利用してきましたが、Animate.cssなどのライブラリ等を利用する際に、カスタマイズされたクラス名を割り当てたい場合があります。その際に利用するのが、「カスタムトランジションクラス」です。

 

例えば下記コードはサンプル1と全く同じ挙動をしますが、本来自動的に割り当てられる .v-enter-activeと.v-leave-active というクラス名を、それぞれ myEnterClass、myLeaveClass という名前に置き換えています。

 

サンプル4

24行目

.v-enter-activeと.v-leave-activeは、それぞれtransitionの属性に「enter-active-class」「leave-active-class」というプロパティを用意し適当な名前のクラス名(上記ではmyEnterClass、myLeaveClass)を割り当てています。

 

EnterフェーズおよびLeaveフェーズにおける各動作に対するプロパティは下記表の通りです。

プロパティ名 タイミング
 enter-class  Enter開始
 enter-active-class   Enger開始後に実行されている間
 enter-to-class   Enter完了
 leave-class  Leave開始
 leave-active-class  Leave開始後に実行されている間
 leave-to-class   Leave完了

 

 

下記コードでは、実際にAnimate.cssライブラリを利用しています。

 

サンプル5

 

 

 

JavaScriptフックについて


 

EnterフェーズおよびLeaveフェーズの過程において、イベント(関数)を実行したい場合があります。transitionでは下記表のように各フェーズのポイント(いわゆるフック)において、イベントを実行することができます。この機能を駆使しJavaScriptを利用していくことによってより複雑なアニメーションを実装していくことが可能となります。

 

 イベント名(フック) タイミング
 before-enter  Enter開始直前
 enter  Enter開始
 after-enter  Enter完了
 enter-cancelled   Enterキャンセル 
 before-leave  Leave開始前
 leave  Leave開始
 after-leave  Leave完了
 leave-cancelled  Leaveキャンセル 

 

実際に各イベントが発生するタイミングにおいて、コンソールで文字を出力しているのがサンプル6です。

 

サンプル6

transitionタグにv-onディレクティブでイベント名とハンドラを指定しています。実際にブラウザのコンソール画面を開いてみると、ボタンをクリックするごとにそれぞれのイベントが発生していることを確認できます。例えば1回目にボタンをクリックすると3秒後にEnterフェーズが完了となり(要素が追加された時) afterEnter と出力されるのが確認できます。

 

 

 

animationによるキーフレーム


 

animationを利用すると、キーフレームによるアニメーションを実装することができます。

 

サンプル7

8〜10行目

Enterフェーズ実行中におけるキーフレーム名と実行時間を指定しています。bounceという適当に付けたキーフレーム名を指定し、実際のアニメーションは16〜20行目の@keyframes〜で記述しています。

 

12〜14行目

Leaveフェーズ実行中においては、reverse の指定により、16〜20行目の@keyframes〜で記述したアニメーションの逆再生を実行しています。

 

16〜20行目

EnterおよびLeaveフェーズで指定したbounceという名前のキーフレームを記述しています。どちらのフェーズも10秒間に指定しているので、50%のキーの部分、つまりボタンをクリックして5秒後が一番スケール(scale)の大きくなるアニメーションとして実行されます。

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー