Vue.jsのTransition機能についてまとめる。(超基礎の学習記録)
基本的な使用方法
1. transitionタグで囲む
-
トランジションを適用したい範囲を
transitionタグで囲み、コンポーネントを作成。 -
このコンポーネント内要素に、アニメーションなどの動きをCSSで記述していくためのクラスを自動的に付与。
<transition> <p v-if="show">Transition Test</p> </transition>
2. v-show/v-ifディレクティブの適用
- CSSによって動きを制御したい要素には、
v-showまたはv-ifディレクティブで表示・非表示する挙動を実装。 - ディレクティブの機能により、クラスの切り替え機能を割り当て。
3. クラス（CSS）記述
- 付与されるクラスは、以下２つの状態に大別される。
- Enter
- Leave
- 上記状態は、
v-showおよびv-ifによって切り替わるように処理。 - 以下の例では、ボタンをクリックすると下記図の流れでクラスを適用。
-
.v-enter時には、文字Testは透明状態(opacity:0)となっている。 -
Transitionボタンをクリックすると.v-enter-active処理が実行される。.v-enter-to状態となり文字Testが表示される。 -
Transitionボタンを再度クリックすると.v-leave-active処理が実行され、.v-leave-to状態に遷移する。
-
<template>
<div id="app">
<button v-on:click="show = !show">
Transition
</button>
<transition>
<p v-if="show">Test</p>
</transition>
</div>
</template>
<script>
export default {
name: 'test',
data :function (){
return {
show: false
}
}
}
</script>
<style scoped>
.v-enter-active, .v-leave-active {
transition: opacity .5s;
}
.v-enter, .v-leave-to{
opacity: 0;
}
</style>
Transitionの識別
複数のtransitionを利用する際、name属性を追加して識別する。以下の例では、test1をプレフィックスとしたクラスが生成される。
.test1-enter-activeのように記述してデフォルトの.v-enter-activeとは別のコンポーネントとして識別可能。
<template>
<div id="app">
<button v-on:click="show = !show">
Transition
</button>
<transition name="test1">
<p v-if="show">Test1</p>
</transition>
</div>
</template>
<script>
export default {
name: 'test1',
data :function (){
return {
show: false
}
}
}
</script>
<style scoped>
.test1-enter-active, .test1-leave-active {
transition: opacity 1s;
}
.test1-enter, .test1-leave-to{
opacity: 0;
}
</style>
初期描画時のTransition
ノードの初期描画時にトランジションを適用したい場合、appear 属性を追加する。
appear 属性を指定された transition タグは、ページを開いた時に、要素が追加される。
<transition appear>
<!-- ... -->
</transition>