【Vue.js】フェードイン・フェードアウト（トランジション）の使い方
Vue.jsに用意されているtransitionコンポーネントを使うフェードインやフェードアウトなどのtransitionを設定することができる。
公式ページ
https://jp.vuejs.org/v2/guide/transitions.html
目次
## トランジションの方法 条件を満たすと、特定のclass属性が付与される。このクラス属性に対してcssスタイルを設定する。
- 使えるディレクティブ：
v-show,v-if - 要素をtransitionタグで囲む
- 中のタグは一つのみ。
- 複数ある場合は上の要素のみ表示される。
- 要素の状態によって専用のクラスが付与される。
## クラスの適用フェーズ 要素の表示・非表示、トランジションの段階によってクラスが付与される。
## 適用されるクラスの種類 適用されるクラスは全部で６種類。enterとleaveに２分される。
- enter: true(非表示→表示)の時に適用されるクラス
- leave: false(表示→非表示)の時に適用されるクラス
| クラス名 | 概要 |
|---|---|
| v-enter | 開始状態。trueになった瞬間に適用される |
| v-enter-active | 活性状態。trueになった瞬間から、完全に表示されるまで適用される |
| v-enter-to | 終了状態。trueによる遷移が終わった瞬間に適用される |
| v-leave | 開始状態。falseが適用された瞬間に適用される |
| v-leave-active | 遷移状態。falseによる遷移の開始から終了するまで適用される |
| v-leave-to | 終了状態。falseによる遷移が完全した瞬間に適用される |
## クラスの命名ルール transitionタグには `name属性` で名前をつけることができる。
name属性がないデフォルト状態ではクラス名の冒頭にv-がつく。
name属性を記述した場合は、v-がname属性の値に置き換わる。
①name属性がない場合
<transition>
↓
v-enter
②name属性がある場合
<transition name="trans">
↓
trans-enter
## CSSの設定 効果の持続期間は`v-enter-active`, `v-leave-active`に適用する。
透過度(opacity)はv-enterとv-enter-leaveに適用する。
css設定の例
.v-enter-active, .v-leave-active {
transition: opacity 1s
}
.v-enter, .v-leave-to{
opacity: 0;
}
トランジションの実例
 |
|---|
.js
var app = new Vue({
el:'#app',
data:{
isShown: false
}
})
.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<div>
<button @click="isShown =! isShown">表示切り替え</button>
</div>
<transition name="vshow">
<p v-show="isShown">
v-show="isShown"
</p>
</transition>
<transition name="vif">
<p v-if="isShown">
v-if="isShown"
</p>
</transition>
<br><hr>
<p>isShownプロパティの値：{{isShown}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="script.js"></script>
</body>
</html>
.css
.vshow-enter-active, .vshow-leave-active{
transition: opacity 1s
}
.vshow-enter, vshow-leave-to{
opacity: 0;
}
.vif-enter-active, .vif-leave-active{
transition: opacity 2s
}
.vif-enter, vif-leave-to{
opacity: 0;
}
以上。