More than 3 years have passed since last update.

【Vue.js】フェードイン・フェードアウト（トランジション）の使い方

Vue.js

Last updated at 2020-11-04Posted at 2020-08-06

【Vue.js】フェードイン・フェードアウト（トランジション）の使い方

Vue.jsに用意されているtransitionコンポーネントを使うフェードインやフェードアウトなどのtransitionを設定することができる。

公式ページ
https://jp.vuejs.org/v2/guide/transitions.html

クラス名	概要
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;
}

以上。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【Vue.js】フェードイン・フェードアウト（トランジション）の使い方

【Vue.js】フェードイン・フェードアウト（トランジション）の使い方

目次

トランジションの実例