【Vue】トランジションを使って一定時間で自動でフェードアウトさせる

やりたいこと

ボタンを押すと現れ、一定時間でふわっと消えるようなものを作りたい

例で使うHTMLは下記になります

• いいねのボタンを押したら、いいねのメッセージが出てきて、３秒位かけてふわっと消える
• 消えかけてるときに再度ボタンを押したら、もとに戻り再度フェードアウト始める
• 効果はフェードアウトのみ

(一番下に動作サンプルおいています)

<div id="app">
    <button>いいね</button>
    <div class="good">
        いいね
    </div>
    </span>
</div>
<style>
.good {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    width: 150px;
    height: 50px;
    background-color: #2d2d2d;
}
</style>

やりかた

1. トランジションを使いフェードアウトさせる

アニメーションさせたいものを<transition></transition>で囲みます

<div id="app">
    <button>いいね</button>
    <transition>
        <div class="good">
            いいね
        </div>
    </transition>
    </span>
</div>

次に、ボタンを押すと表示非表示を切り替えられるようにします
デフォルトがfalseのshowというデータを用意しておきます
これがtrueのときに表示させます

app.vue

new Vue({
    el: "#app",
    data: {
        show: false
    }
});

<div id="app">
    <button @click="show = !show">いいね</button>
    <transition>
        <div v-show="show" class="good">
            いいね
        </div>
    </transition>
    </span>
</div>

@click="show = !show"でクリック時に真偽値を反転
v-show="show"でtrueのときだけ表示

これでクリックで表示と非表示は切り替わりました

次にフェードアウトです。
トランジションで囲んだものは、表示時にenter、非表示時にleaveのスタイルのアニメーションを行います

今回はフェードアウトなので、leaveを使います
透明度を３秒かけて1から0にしています

.v-leave-active {
    transition: opacity 3s;
}

.v-leave {
    opacity: 1;
}

.v-leave-to {
    opacity: 0;
}

これで、クリックで表示、再度クリックでフェードアウトまではできました

ここまでの全体

html

<div id="app">
    <button @click="show = !show">いいね</button>
    <transition>
        <div v-show="show" class="good">
            いいね
        </div>
    </transition>
    </span>
</div>

css

.good {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    width: 150px;
    height: 50px;
    background-color: #2d2d2d;
}

.v-leave-active {
    transition: opacity 3s;
}
.v-leave {
    opacity: 1;
}

.v-leave-to {
    opacity: 0;
}

js

new Vue({
    el: "#app",
    data: {
        show: false
    },
    methods: {
        toggleBtn: function () {
            this.show = !this.show;
        }
    }
});

2.自動で消えるように

今のままだと一回目表示で、二回目フェードアウトなので満たせていないです

解決策として、ボタンを押した際に、表示フラグをtrueにした後、自動でfalseにします

js

new Vue({
    el: "#app",
    data: {
        show: false
    },
    methods: {
        fadeOut() {
            this.show = true;
            setTimeout(() => {
                this.show = false;
            }, 1);
        }
    }
});

<div id="app">
    <button @click="fadeOut">いいね</button>
    <transition>
        <div v-show="show" class="good">
            いいね
        </div>
    </transition>
    </span>
</div>

setTimeoutで１ミリ秒(1/1000秒)後にfalseにしています
これにより、trueになり表示されるも、すぐfalse状態になり、設定したフェードアウトが始まります

ちなみにアロー関数でthisが固定されているので、もしfunction()にしたい場合bindしてください

setTimeout(() => {
   this.show = false;
}, 1);

setTimeout(function() {
   this.show = false;
}.bind(this), 1);

See the Pen Vue Transition Fadeout by natusme (@natsume0718) on CodePen.

よりよい方法が有りましたら教えていただけますと幸いです