Vueトランジションを使用して、いいね！のアニメーション効果を実現する

Vueのトランジションコンポーネントを使えば、いいね！アニメーションの効果を表現できます。以下はその簡単なサンプルコードです。

<template>

<div>

<button @click=”like” :disabled=”liked”>点赞</button>

<transition name=”fade”>

<span v-if=”liked” class=”heart”>❤️</span>

</transition>

</div>

</template>

<script>

export default {

data() {

return {

liked: false

};

},

methods: {

like() {

this.liked = true;

setTimeout(() => {

this.liked = false;

}, 2000); // 这里设置2秒后取消点赞状态，可以根据需要调整时间

}

}

};

</script>

<style scoped>

.fade-enter-active,

.fade-leave-active {

transition: opacity 0.5s;

}

.fade-enter,

.fade-leave-to {

opacity: 0;

}

.heart {

font-size: 24px;

color: red;

}

</style>

上記のコードでは、Vueのコンポーネントを使用して要素をラップし、その要素を使用していいね！アイコン（ここではハートアイコンを使用）を表示します。[いいね！]ボタンをクリックすると、likedプロパティの値を変更して要素を表示または非表示にし、遷移効果をトリガーします。

フェードアウトエフェクトを実現するために、要素にCSSクラス名「fade」を追加し、それに対応するトランジションスタイルを定義しました。この例では、トランジションプロパティとしてopacityプロパティを使用しており、トランジション時間を0.5秒に設定しています。

setTimeout関数は、いいねして取り消す際の遅延効果をシミュレートするために使用されます。遅延時間は必要に応じて調整できます。

上記のコードにより、「いいね」ボタンをクリックすると、いいねアイコンがフェードイン・フェードアウトのアニメーションで表示され、2秒後に自動的に非表示になります。