pull/1/head
QMZ 2 months ago
parent 3bb5a36f1b
commit 59f650ccda

@ -1,61 +1,9 @@
<template>
<div>
<!-- 爱心按钮点击后会变红并带有过渡效果 -->
<button @click="toggleLike" :class="{'liked': isLiked}">
<span v-if="isLiked"></span>
<span v-else>🤍</span>
</button>
</div>
个人空间
</template>
<script>
export default {
name:'AaA',
data() {
return {
isLiked: false, //
};
},
methods: {
toggleLike() {
this.isLiked = !this.isLiked; //
},
},
};
</script>
<style scoped>
/* 默认的按钮样式 */
button {
background: none;
border: none;
font-size: 3rem;
cursor: pointer;
outline: none;
padding: 0;
}
/* 点赞后的红色样式 */
@keyframes scaleAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
name: 'spaceIndex', //
//
}
}
/* .liked 类,应用动画 */
.liked {
color: red;
animation: scaleAnimation 0.5s ease-in-out;
}
</style>
</script>
Loading…
Cancel
Save