要實現點贊動畫效果,你可以使用Vue的過渡(transition)組件。下面是一個簡單的示例代碼:
<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的<transition>組件來包裹一個<span>元素,這個元素用來展示點贊的圖標(這里使用了一個愛心圖標)。當點擊“點贊”按鈕時,我們通過改變liked屬性的值來顯示或隱藏這個<span>元素,從而觸發過渡效果。
為了實現淡入淡出的過渡效果,我們給<span>元素添加了一個CSS類名fade,并定義了相應的過渡樣式。在這個例子中,我們將opacity屬性作為過渡屬性,并設置了0.5秒的過渡時間。
請注意,在代碼中使用了setTimeout函數來模擬點贊后取消點贊的延遲效果。你可以根據需要調整延遲時間。
通過上述代碼,當點擊“點贊”按鈕時,點贊圖標會以淡入淡出的動畫效果顯示出來,然后在2秒后自動隱藏。