vue项目 图标使用svg路径 实现鼠标经过描边效果 兼容IE浏览器

项目场景：

要求：鼠标经过 icon时，icon有个动画描边的效果，一点点展示。

---

使用animation动画实现（IE不支持）：

提示：可以使用animation动画实现描边效果，缺点是IE不支持。

说明：外层添加鼠标移入移出方法，path的d=“” 路径 ，图标库下载svg格式的可以复制出里面的路径，其他图片转化一下svg，也可以取到路径。

v-bind:class 默认有ddo的class，鼠标移动上，多加一个starfill 的class

login.vue

<div @mouseenter="enter()" @mouseleave="leave()" style="width:150px;height:150px">
  <svg id="icon-user" xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell">
    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" style="stroke-dasharray: 57, 77; stroke-dashoffset: 0;" v-bind:class="{ ddo: isActive, 'starfill': hasError }" ></path>
    <path d="M13.73 21a2 2 0 0 1-3.46 0" style="stroke-dasharray: 5, 25; stroke-dashoffset: 0;" ></path>
  </svg>
</div>

 

说明：js方法 ，鼠标移动上去显示两个class  ddo和starfill ，移出显示一个class  ddo

login.vue

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false,
    }
  },

  methods : {
    enter(){
      this.hasError = true;
    },
    leave(){
      this.hasError = false;
    },
  },
}
</script>

 

说明：样式，stroke-dasharray: 60;定义线长  stroke-dashoffset: 0;定义偏移量

login.vue

.starfill{

  fill: none;

  stroke-width:1;

  stroke:#ff7700;

  stroke-linejoin:round;

  stroke-linecap:round;

  stroke-dasharray: 60;

  stroke-dashoffset: 0;

  animation: starFill 5s linear 1 forwards;

  /*animation-play-state: paused;*/

}



@keyframes starFill {

  0% {

    stroke-dashoffset: 60;

  }

  100% {

    stroke-dashoffset: 0;

  }
}

 

---

使用js动画实现（IE支持）：

提示：可以使用js循环方式 修改stroke-dashoffset 动画实现描边效果，IE兼容可用。

说明：:ref=xxx 动态修改ref的值 鼠标移动上和移出的效果

login.vue

<div @mouseenter="enter()" @mouseleave="leave()" style="width:150px;height:150px">
  <svg id="icon-user" xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell">
    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" style="stroke-dasharray: 57, 77; stroke-dashoffset: 0;" :ref=xxx></path>
    <path d="M13.73 21a2 2 0 0 1-3.46 0" style="stroke-dasharray: 5, 25; stroke-dashoffset: 0;" ></path>
  </svg>
</div>

 

说明：js方法 ，鼠标移动上去 修改ref的值为dsds， 并且定义线长60，定时器调用myCallback方法，实现从60到0的递减 ，如果等于0 最终回到最开始状态，鼠标经过只执行一次动画。如果想一直循环，在判断等于0的时候，把值修改成定义的线长60.。如果鼠标移出后立马终止动画，还原成默认状态，把ref的值修改成xxx，在判断里实现。

login.vue

<script>
export default {
  data() {
    let i ;
    let myPath = '';
    let intervalID ='';
    return {
      xxx:'',
    }
  },

  methods : {
    enter(){
      this.i=60;
      // this.myPath = document.getElementsByClassName('ddo');
      this.xxx='dsds';
      intervalID = window.setInterval(this.myCallback, 250);
    },
    leave(){
      // this.xxx='zzz';
      setTimeout(this.losee, 3000);
    },
    losee(){
      clearInterval(this.intervalID);
    },
    myCallback(){
      if (this.i == 0 ) {
        if(this.$refs.dsds==undefined){
          this.i == 0;
          this.$refs.zzz.style.strokeDashoffset = 0;
        }
        this.i == 0;
        this.$refs.dsds.style.strokeDashoffset = 0;
      }
      else{
        if(this.$refs.dsds==undefined){
          this.i == 0;
          this.$refs.zzz.style.strokeDashoffset = 0;
        }
        this.$refs.dsds.style.strokeDashoffset = this.i;
        --this.i;
      }
    }
  },
}
</script>