鼠标悬浮时圆环顺时针填满的动画实现

 

没有弄动图，大概就是悬浮时从0%到100%，一个顺时针充满的效果。

最一开始是想到利用element这的progress环形进度条组件来实现，鼠标移入时将percentage从0设为100，移除时再设为0即可。

底下的那个圆环不想要灰色、中间不想要文字，可以这样设置：

/deep/ .el-progress__text{
  display:none;
}
.el-progress /deep/ path:first-child {
  stroke: #cff4e1;
}

后面研究了一下element实现这个的原理，是用svg path 画圆，再利用 Stroke 属性，主要是stroke-dasharray 属性画虚线的功能。自己写了一个，代码如下：

<template>
  <div>
    <div v-for="(i,index) in showList" :key="index" @mouseover="turnShow(index)" @mouseleave="turnHidden(index)" class="main" :class="{'show':i,'noshow':!i}">
      <svg width="100" height="100">
        <!--底下那个圈-->
        <path fill="none" d="M 50 50 m -46 0 a 46 46 0 1 1 92 0 a 46 46 0 1 1 -92 0" stroke="pink" stroke-width="8px" stroke-linecap="round"/>
        <!--会动的那个圈-->
        <path fill="none" d="M 50 50 m -46 0 a 46 46 0 1 1 92 0 a 46 46 0 1 1 -92 0" stroke-width="0px" stroke-linecap="round"
          stroke-dasharray="0,290"/>
        <text x="18" y="55" fill="red">I love SVG</text>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showList: [false, false, false, false]
    }
  },
  methods: {
    turnShow(index) {
      this.$set(this.showList, index, true)
    },
    turnHidden(index) {
      this.$set(this.showList, index, false)
    }
  }
}
</script>

<style lang="less" scoped>
.main{
  width:100px;
  display:inline-block;
  margin-right:100px;
}
.show{
  path:nth-child(2){
    stroke:red;
    stroke-width: 8px;
    stroke-dasharray: 290,290;
    transition: stroke-dasharray 0.6s;
  }
}
.noshow{
  path:nth-child(2){
    stroke:pink;
    // 消失的时候不需要渐变消失就用这行
    // stroke-width: 0px;
    stroke-width: 8px;
    stroke-dasharray: 0,290;
    // 消失的时候不需要渐变消失就用这行
    // transition: stroke-dasharray 0.6s
    // 设置颜色变化的延时时间为0.5s是大概试出来的一个时间，不是绝对完美
    // 设为0.6的话鼠标移动很快的话，会感觉很不顺畅
    transition: stroke-dasharray 0.6s,stroke 0s linear 0.5s;
  }
}
</style>

 

参考链接：

svg path画圆看的这篇：https://blog.csdn.net/cdc_csdn/article/details/80473541