トランジションとは？
CSSトランジションだったり、アニメーションをより簡単に使いやすくサポートするための機能です。要素がDOMに追加削除されたりしたタイミングで、スタイルを適用します。
使い方
「<transition>」タグ(transitionコンポーネント)で囲むだけです。追加する際は「enter」、削除する際は「leave」という文字を含んだクラスが、トランジションクラスとしてその要素に付加されます。
トランジションの種類
トランジションには下記の種類があります。
- 単一要素トランジション
- リストトランジション
単一要素トランジション
「<transition>」タグの中に、1つだけ要素が存在する場合に使用できるトランジションです。v-if、v-show等の描画切り替え、動的コンポーネント等が該当します。
リストトランジション
複数要素をグループ化して、追加、削除、移動等を行う場合に使用します。v-for等を使用している場合は、これが該当します。
実装
6つのトランジションクラス
transitionコンポーネントを実装する際は下記6つのクラスを使用します。(fade-enter等)
| トランジションクラス | 説明 |
|---|---|
| {name属性の値}-enter | 現れる時の最初の状態 |
| {name属性の値}-enter-active | 現れる時のトランジションの状態 |
| {name属性の値}-enter-to | 現れる時の最後の状態 |
| {name属性の値}-leave | 消える時の最初の状態 |
| {name属性の値}-leave-active | 消える時のトランジションの状態 |
| {name属性の値}-leave-to | 消える時の最後の状態 |
表示の動き
表示させるタイミングはenterとenter-activeがtransitionで囲んだ箇所に付加されます。そしてすぐにenterを削除して、enter-toを付加します。最終的にenter-toとenter-activeを削除します。
enterは最初の1フレームしか付加されないのでほとんど認識するのは難しいです。
非表示の動き
表示させるタイミングはleaveとleave-activeがtransitionで囲んだ箇所に付加されます。そしてすぐにleaveを削除して、leave-toを付加します。最終的にleave-toとleave-activeを削除します。
ソース例
ボタンをクリックした際に、ゆっくり表示されて、ゆっくり非表示にさせる例です。
template
transitionにつけるnameは省略した場合はvと言う値が自動で付加されますが、基本的には命名するようにしましょう。
|
1 2 3 4 |
<button @click="show = !show">切り替え</button> <transition name="fade"> <p v-if="show">テスト</p> </transition> |
コンポーネント
v-ifで表示非表示させるための変数です。
|
1 2 3 4 5 |
data() { return { show: true } } |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 3s; } .fade-enter-to{ opacity: 1; } .fade-leave{ opacity: 1; } .fade-leave-active{ transition: opacity 3s; } .fade-leave-to{ opacity: 0; } |
アニメーションの実装
CSSアニメーションの場合は下記のように実装します。
template
|
1 2 3 |
<transition name="slide"> <p v-if="show">anime</p> </transition> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.slide-enter-active{ animation: slide-in 3s; } .slide-leave-active{ animation: slide-in 3s reverse; } @keyframes slide-in { from { transform: translateX(100px); } to { transform: translateX(0); } } |
その他属性の使い道
type属性
トランジションとアニメーションはCSSのなかにそれぞれ記述すればどちらも適用させる事が可能です。長い秒数の方を基準として描画が行われます。明示的にどちらをDOM描画の終了の基準として指定したい場合はtype属性をtransitionコンポーネントに指定します。
|
1 2 3 |
<transition name="名前" type="animation"> <p v-if="show">animeとトランジション</p> </transition> |
apper属性
最初の初期描画時にトランジションやアニメーションを実行する事が可能です。
トランジションフック
JavaScriptを用いたトランジション操作を行う場合に使用します。
この記事へのコメントはありません。