2.5.2Vue.jsで要素を動的に加えたり、除いたりするとき、アニメーションで変化させることができます。例を示しながら、基本的な操作についてご説明しましょう。詳しくは、「Enter/Leaveとトランジション一覧」をお読みください。要素をフェードイン/フェードアウトさせるまず用意しなければならないのは、要素を動的に加えたり除いたりするアプリケーションです。要素の表示・非表示はブール(論理)値のプロパティ(show)として、つぎのようにVue()コンストラクタに渡すオプションオブジェクトのdataに定めます。6)にもとづき、const宣言とアロー関数式を用いました。=>demo.$mount('#demo'));<body>要素には、トグルボタン(<button>要素)とテキスト(<p>要素)を置きます(図001)。ボタンクリックのv-on:clickイベントでプロパティ(show)のブール値を反転し、テキストの要素に加えたv-ifディレクティブにより動的に追加・削除されます。v-if="show">hello</p></div>図001■ボタンでテキストが動的に削除・追加される加えられたり除かれたりする要素にアニメーションを与えるのが<transition>ラッパーコンポーネントです(「単一要素/コンポーネントのトランジション」参照)。アニメーションさせたい要素を、つぎのように<transition>コンポーネントで包みます。v-if="show">hello</p></transition>すると、CSSでアニメーションのための特別のクラスが自動的に使われます(「トランジションクラス」参照)。クラスv-enterは、要素が加えられる前のスタイルを定めます。v-enter-activeにtransitionやanimationなどのプロパティで、要素が加わるアニメーションを与えればよいのです。つぎのCSSは、要素をフェードインで加えます。0;}要素をフェードアウトで除くには、また違ったクラスのCSSを定めます。アニメーションはv-leave-activeで、終わりの状態がv-leave-toです。つぎのCSSでは、transitionプロパティのアニメーション時間やタイミング関数を、フェードインとは少し変えてみました。0;}これでボタンをクリックするたびに、テキスト(<p>要素)がフェードアウトおよびフェードインするようになりました(コード001)。併せて、CodePenに以下のサンプル001を掲げてあります。CSSプロパティanimationでアニメーションを与える<transition>コンポーネントをいくつか加えて、それぞれに違ったアニメーションを定めたい場合には、つぎのようにname属性を与えます。v-if="show">hello</p></transition>すると、トランジションクラスの接頭辞が「v」から、そのname属性値に変わります。これで、<transition>コンポーネントごとに異なるアニメーションのCSSが定められるでしょう。0;}<transition>コンポーネントには、トランジションクラスにtransitionだけでなくanimationプロパティで、より細かなアニメーションを加えることもできます。つぎのCSSは要素を除いたり加えたりするとき、水平にバウンドするようにアニメーションさせます。reverseは逆再生する設定です。scale(1);}}これで、ボタンクリックして要素が削除・追加されるときのアニメーションは、水平にバウンドするような動きになりました。書き改めた<body>要素と<style>要素はつぎのコード002にまとめたとおりです。JavaScriptの記述は前掲コード001と変わっていません。以下のサンプル002をCodePenに掲げましたので、実際の動きはこちらでお確かめください。要素をはじめに描画するときアニメーションさせる動的に追加・削除することなく、予め置いてある要素も、はじめに描画するときアニメーションさせることができます。このとき<transition>コンポーネントに加えるのがappear属性です(「初期描画時のトランジション」参照)。デフォルトではenterとleaveのトランジションクラスが使えます。translateY(-20px);}このコードを以下のサンプル003に加えると、タイトルのテキストがフェードインしながら下りてきます(図002)。TodoMVCをつくる」01〜05で解説しています。書き替えたあとの動きについては、後掲サンプル004でお確かめください。リストの要素をアニメーションさせるアニメーションさせたい要素がv-forでつくられるリストのような場合には、<transition-group>コンポーネントを用います(「リストトランジション」参照)。コンポーネント<transition-group>は、<transition>と異なり、実際の要素を描画します。要素の種類を定めるのはtag属性です(デフォルトは<span>)。v-forでつくられるリストの親要素として加えます。項目の追加と削除および残り項目数表示」02「アプリケーションに定めた項目のデータをTodoリストに表示する」参照)。class="view"></div></li><!--</ul>--></transition-group>CSSは、トランジションクラスenterとleave-toでアニメーションさせるプロパティの値を決めます。transitionプロパティは<transition-group>コンポーネントに与えたクラス(todo-item)で定めてください。クラスの名前は任意で、とくに<transition-group>コンポーネントのname属性値と合わせなくて構いません。クラスleave-activeは、positionプロパティをabsoluteとします。absolute;}これで、リストの項目を加えたり除いたりすると、水平に移動しつつフェードイン・フェードアウトするようになります。コードは全体を示すとわずらわしくなりますので、つぎのサンプル004でお確かめください。6の構文に書き替える」で解説しています。サンプルをjsdo.itからCodePenに差し替え。