Escenas a utilizar:
Aplicable a me gusta de obras, me gusta en salas de transmisión en vivo y otras escenas que necesitan me gusta
prestar atención:
Si una página se usa en varios lugares, de acuerdo con las necesidades de su propia escena, recuerde borrar el contenedor de Piaoxin antes de cambiar
Fragmento de código específico:
<div class="item-like">
<div class="like-num">
<p><span class="p-span">序号：</span>{
{item.id}}</p>
<p><span class="p-span">点赞：</span>{
{item.likes}}</p>
</div>
<!-- 点赞按钮 -->
<div class="like-btn" @click="gotoLike(item.id,index)">为TA点赞</div>
<!-- 放置飘心的容器 -->
<div class="like-box" v-if="currentIndex == index" v-for="(ite,ind) in imgData" :key="ind" v-html="ite"></div>
</div>
/**以下使用的less**/
.item-like {
width: 100%;
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.55rem;
margin: 0.5rem 0;
}
.like-num {
width: 58%;
position: relative;
box-sizing: border-box;
padding: 0.15rem 0.5rem;
color: #fff;
border-radius: 0.3rem;
border: 1px solid #fff;
p {
white-space: nowrap;
}
}
.like-btn {
width: 35%;
height: 1.8rem;
position: relative;
box-sizing: border-box;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
font-size: .72rem;
border-radius: .25rem;
color: #fff;
background-color: #4695F1;
cursor: pointer;
z-index: 99;
}
.like-box {
width: 100%;
height: 1rem;
position: absolute;
right: 0;
}
.parentImg {
width: 1.65rem;
height: 1.65rem;
display: inline-block;
position: absolute;
top: -0.15rem;
right: 8%;
animation: vertical-animation 1.6s linear forwards;
-webkit-animation: vertical-animation 1.6s linear forwards;
}
@-webkit-keyframes vertical-animation {
0% {
transform: translateY(0px);
opacity: 1
}
100% {
transform: translateY(-300px);
opacity: 0
}
}
@keyframes vertical-animation {
0% {
transform: translateY(0px);
opacity: 1
}
100% {
transform: translateY(-300px);
opacity: 0
}
}
.parentImg0 img,
.parentImg1 img {
width: 1.55rem;
height: 1.55rem;
display: inline-block;
animation: hor-animation 1.4s linear forwards;
-webkit-animation: hor-animation 1.4s linear forwards;
}
@-webkit-keyframes hor-animation {
0% {
transform: translateX(0px);
transform: scale(0);
}
10% {
transform: scale(1);
}
25% {
transform: translateX(10px);
}
50% {
transform: translateX(0px);
}
75% {
transform: translateX(-10px);
}
100% {
transform: translateX(0px);
}
}
.parentImg2 img,
.parentImg3 img {
width: 1.45rem;
height: 1.45rem;
animation: hor-animation1 1.4s linear forwards;
-webkit-animation: hor-animation1 1.4s linear forwards;
}
@-webkit-keyframes hor-animation1 {
0% {
transform: translateX(0px);
transform: scale(0);
}
10% {
transform: scale(1);
}
33% {
transform: translateX(15px);
}
66% {
transform: translateX(10px);
}
100% {
transform: translateX(0px);
}
}
.parentImg4 img,
.parentImg5 img {
width: 1.35rem;
height: 1.35rem;
animation: hor-animation2 1.4s linear forwards;
-webkit-animation: hor-animation2 1.4s linear forwards;
}
@-webkit-keyframes hor-animation2 {
0% {
transform: translateX(0px);
transform: scale(0);
}
10% {
transform: scale(1);
}
33% {
transform: translateX(-5px);
}
66% {
transform: translateX(0px);
}
100% {
transform: translateX(6px);
}
}
.parentImg6 img,
.parentImg7 img {
width: 1.2rem;
height: 1.2rem;
animation: hor-animation3 1.2s linear forwards;
-webkit-animation: hor-animation3 1.2s linear forwards;
}
@-webkit-keyframes hor-animation3 {
0% {
transform: translateX(0px);
transform: scale(0);
}
10% {
transform: scale(1);
}
33% {
transform: translateX(20px);
}
66% {
transform: translateX(10px);
}
100% {
transform: translateX(0px);
}
}
.parentImg8 img,
.parentImg9 img {
width: 1rem;
height: 1rem;
animation: hor-animation4 1.2s linear forwards;
-webkit-animation: hor-animation4 1.2s linear forwards;
}
@-webkit-keyframes hor-animation4 {
0% {
transform: translateX(0px);
transform: scale(0);
}
10% {
transform: scale(1);
}
33% {
transform: translateX(-10px);
}
66% {
transform: translateX(-15px);
}
100% {
transform: translateX(-8px);
}
}
var list = {
template: "#list",
data: function () {
return {
imgData:[],//飘心容器
currentIndex: null, //当前点赞下标
}
},
created: function () {
},
mounted: function () {
},
methods: {
//点赞
gotoLike: function (id,index) {
//这里的判断是适用于单页面多个按钮涉及点赞的情况，可根据实际需求来
if (this.currentIndex != index && this.imgData.length >= 4) {
this.imgData.splice(0, 3);
}
this.currentIndex = index;
//根据自己的需要去除
if(this.imgData.length > 15) {
this.imgData.splice(0,12)
}
var num = Math.floor(Math.random() * 10);
var key = Math.floor(Math.random() * 10);
if (key == 0 || key == 1) {
var src = "./images/like/1.png"
} else if (key == 2 || key == 3) {
var src = "./images/like/2.png"
} else if (key == 4 || key == 5) {
var src = "./images/like/3.png"
} else if (key == 6 || key == 7) {
var src = "./images/like/4.png"
} else if (key == 8 || key == 9) {
var src = "./images/like/5.png"
}
var str = '<span class="parentImg parentImg' + num + '"><img src="' + src + '"</span>';
this.imgData.push(str);
}
};
Visualización de resultados:
Como el efecto de corazón flotante
Mi compartir ha terminado. Esta animación puede continuar siendo optimizada. Los amigos que tienen mejores métodos de escritura son bienvenidos a compartir y animarse unos a otros ~