#はじめに
おはようございます。こんにちは。こんばんは。
ワタタクです。
今回はVue.jsのtransitionについて見けいけたらいいなと書いています。
Vue.jsでwebページを作っていく中で「Vue.jsでアニメーションってどうやってつけんの〜?」
と思い調べた結果「transition」を使うと初めて知ったので勉強してみました。
では、早速やってみます。
#使い方
##transitionタグで囲む
アニメーションさせたい要素をこのようにtransitionタグで囲みます。
このtransitionコンポーネント内の要素に対して、アニメーションなどの動きをCSSで記述していくためのクラスが自動的に付与されます。
※実際に付与されるクラス（CSS）によって動きを制御したい要素には、v-showまたはv-ifディレクティブで表示・非表示する挙動を実装する必要があります。
<transition>
<div v-show="show" class="box">BOX</div>
</transition>
##CSSでスタイルを定義する。
このクラスにCSSでスタイルを定義することがアニメーションをつけることになります。
状態に応じて下記のクラスが付与されます。
| クラス | 状態 |
|---|---|
| v-enter | enterの開始状態 |
| v-enter-active | enterのアクティブ状態 |
| v-enter-to | enterの終了状態 |
| v-leave | leaveの開始状態 |
| v-leave-active | leaveのアクティブ状態 |
| v-leave-to | leaveの終了状態 |
 |
|
| ざっくり分けると、表示時はenterで、非表示時はleave系のクラスが付与されます。 | |
| これを理解したうえで例としてフェードイン・フェードアウトのスタイルを作成します。 |
/* アニメーション中のスタイル */
.v-leave-active,
.v-enter-active {
transition: opacity 1s;
}
/* 表示アニメーション */
.v-enter {
opacity: 0;
}
.v-enter-to {
opacity: 1;
}
/* 非表示アニメーション */
.v-leave {
opacity: 1;
}
.v-leave-to {
opacity: 0;
}
opacity: 1はデフォルトの値なので省略して、下記のようにもできます。
.v-leave-active,
.v-enter-active {
transition: opacity 1s;
}
.v-enter,
.v-leave-to {
opacity: 0;
}
#トランジションを複数回使う
複数設置したいときはtransitionにname属性を設定することで、複数のtransitionを区別して利用することができます。
例えばname属性をbasicとした場合、クラス名は```v-をbasic-``に置き換えます。
<transition name="basic">
<div v-show="show" class="box">BOX</div>
</transition>
.basic-enter {
opacity: 0;
}
.basic-enter-to {
opacity: 1;
}
#初期描画時のトランジション
初期描画時にトランジションで表示することもできます。
その場合はtransitionにappear属性を指定します。
<transition appear>
<div v-show="show" class="box">BOX</div>
</transition>
#2020/03/28追記
上の例ではフェードイン・フェードアウトを紹介しましたがスライドの場合はどうするのか？紹介します。
###Top Slide
上からスライドしてきます。
.top-enter-active, .top-leave-active {
transform: translate(0px, 0px);
transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}
.top-enter, .top-leave-to {
transform: translateY(-100vh) translateY(0px);
}
slide系transitionではtransformプロパティが重要になってきます。transformプロパティはその名前の通り要素の回転、拡大縮小、傾斜、移動を行うことができます。
###Top Left Slide
.top-left-enter-active, .top-left-leave-active {
transform: translate(0px, 0px);
transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}
.top-left-enter, .top-left-leave-to {
transform: translateY(-100vh) translateX(-100vh);
}
###Top Right Slide
.top-right-enter-active, .top-right-leave-active {
transform: translate(0px, 0px);
transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}
.top-right-enter, .top-right-leave-to {
transform: translateY(-100vh) translateX(100vh);
}
###Bottom Slide
.bottom-enter-active, .bottom-leave-active {
transform: translate(0px, 0px);
transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}
.bottom-enter, .bottom-leave-to {
transform: translateY(100vh) translateY(0px);
}
###Bottom Left Slide
.bottom-left-enter-active, .bottom-left-leave-active {
transform: translate(0px, 0px);
transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}
.bottom-left-enter, .bottom-left-leave-to {
transform: translateY(100vh) translateX(-100vh);
}
###Bottom Right Slide
.bottom-right-enter-active, .bottom-right-leave-active {
transform: translate(0px, 0px);
transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}
.bottom-right-enter, .bottom-right-leave-to {
transform: translateY(100vh) translateX(100vh);
}
###Left Slide
.left-enter-active, .left-leave-active {
transform: translate(0px, 0px);
transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}
.left-enter, .left-leave-to {
transform: translateX(-100vw) translateX(0px);
}
###Right Slide
.right-enter-active, .right-leave-active {
transform: translate(0px, 0px);
transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}
.right-enter, .right-leave-to {
transform: translateX(100vw) translateX(0px);
}
以上。
#最後に
最後まで読んでいただきありがとうございました。
また、これまで紹介してきたのはtransitionを扱う上での基礎なので応用とかは公式サイトを見てください。
もし、間違い等アドバイス、ご指摘等有れば教えていただけたら幸いです。
Vue.jsについての基礎(インストール)
Vue.jsについての基礎(基本構文)
Vue.jsについての基礎(Vue-roter)
もよければご覧下さい。