vue封装点赞👍特效组件-阿里云开发者社区

开发者社区> 开发与运维> 正文

vue封装点赞👍特效组件

简介: 如下图样式,主要是用css写出的动画,一个点击变量开关,控制样式变化。如果你也喜欢我的博客,记得点赞关注哦。我会持续更新,转发记得加上参考地址哦。

qqfvv-w4sn7.gif

如图所示,博主封装一个vue点赞效果的组件,由于网上很少有这种插件样式,所以今天出一个点赞教程。

*注意:本次使用两个img标签(两个颜色小手svg),如果你希望用到icon,也可自己更改代码实现。

点赞效果主要用到css,所以,你需要知道的css3知识:

1、animation 动画配合 keyframes 规则使用。
2、box-shadow 阴影与 transition 过渡效果的妙用。

思路:(两种样式,一个控制开关)

1、点赞,出现缩放的红色小手,通过 animation 从0%~50%~100% 的缩放效果。
2、周边向外扩展的光晕效果,使用阴影box-shadow的第四个属性(阴影扩展半径)
   和第五个属性(颜色)来实现。
3、使用vue @click事件,点击控制变量,通过三目运算,控制样式变化。

不多说了,直接看代码:
⚠️注意:img标签中的图片请更换自己的本地图片路径,否则会报错。

<!-- 点赞 -->
<template>
  <div id=''>
    <div class="circle flex-h" @click="handleClick" :class="isUp?'check':''">
      <div class="img-box" :class="isUp?'img-box-check':''">
        <img v-if="isUp" src="@/assets/images/fab.svg" alt="" />
        <img v-else src="@/assets/images/fab2.svg" alt="" />
      </div>
    </div>
  </div>
</template>

<script>

export default {
  components: {},
  data () {
    return {
      isUp: false
    };
  },
  created () {

  },
  mounted () {

  },
  computed: {},
  watch: {},
  methods: {
    handleClick () {
      this.isUp = !this.isUp
    }
  },
}
</script>
<style lang='less' scoped>
.circle {
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0px 0px 0px 0px rgba(223, 46, 58, 0.5);
  .img-box {
    width: 20px;
    height: 20px;
    margin: 5px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none; // 防止快速点击图片被选中,可不加,为提高体验,博主加上了这几行代码。
    & img {
      width: 100%;
      height: 100%;
    }
  }
}
.check {
  -webkit-transition: box-shadow 0.5s;
  -moz-transition: box-shadow 0.5s;
  -o-transition: box-shadow 0.5s;
  transition: box-shadow 0.5s;
  box-shadow: 0px 0px 0px 1em rgba(226, 32, 44, 0);
}
.img-box-check {
  animation: anm 0.5s;
  -moz-animation: anm 0.5s;
  -webkit-animation: anm 0.5s;
  -o-animation: anm 0.5s;
}
@keyframes anm {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
  }
  50% {
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
  }
}

// 以下为处理兼容代码,可不看。

@-moz-keyframes anm {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
  }
  50% {
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
  }
}

@-webkit-keyframes anm {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
  }
  50% {
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
  }
}

@-o-keyframes anm {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
  }
  50% {
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
  }
}
</style>

以上就是点赞效果案例,自己加上 props 封装下,喜欢请点赞。

wechat:villinwechat

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章