使用Vue transition 实现点赞动画效果

要实现点赞动画效果，你可以使用Vue的过渡（transition）组件。下面是一个简单的示例代码：

<template>
<div>
<button@click="like":disabled="liked">点赞</button>
<transitionname="fade">
<spanv-if="liked"class="heart">❤️</span>
</transition>
</div>
</template>
<script>
exportdefault{
data(){
return{
liked:false
};
},
methods:{
like(){
this.liked=true;
setTimeout(()=>{
this.liked=false;
},2000);//这里设置2秒后取消点赞状态，可以根据需要调整时间
}
}
};
</script>
<stylescoped>
.fade-enter-active,
.fade-leave-active{
transition:opacity0.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秒后自动隐藏。