微信小程序的爱心点赞

最新推荐文章于 2024-09-13 07:17:53 发布

devil-J

最新推荐文章于 2024-09-13 07:17:53 发布

阅读量1.7k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/weixin_45660011/article/details/106525188

版权

微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

微信小程序的爱心点赞

在这里插入图片描述
解决方法

heart.png是白色的心，heart-active.png是红心

<image bindtap="clickHeart" class="{{class}}" src="{{class== 'heart'?'../../../../images/live/heart.png' : '../../../../images/live/heart-active.png'}}">
</image>

page {
  background-color: #ccc;
}

.heart {
  position: absolute;
  top: 200px;
  left: 200px;
  width: 40px;
  height: 40px;
  animation: beat3 0.2s ease;
}
.heart-center {
  position: absolute;
  top: 200px;
  left: 200px;
  width: 40px;
  height: 40px;
  animation: beat2 0.2s ease;
}
.heart-active {
  position: absolute;
  top: 200px;
  left: 200px;
  z-index: 2;
  animation: beat 0.5s ease;
  width: 40px;
  height: 40px;
}

@keyframes beat {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes beat2 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.7);
  }
}
@keyframes beat3 {
  0% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(1);
  }
}

Page({
  data: {
    class: 'heart'
  },
  clickHeart() {
    if(this.data.class == 'heart') {
      this.setData({
        class: 'heart-active'
      })
    } else if(this.data.class == 'heart-active') {
      this.setData({
        class: 'heart-center'
      })
      setTimeout(() => {
        this.setData({
          class: 'heart'
        })
      }, 200);
    }
  }
});