vue element el-progress组件增强,鼠标移动到组件上时会触发一个回弹动画效果

有时候需求就是这么奇怪，要求鼠标移动到组件上面有一个动画回弹效果

组件代码如下（ts写法）

<template>
    <div @mouseover="onMouseover" @mouseout="onMouseout">
        <el-progress
            v-bind="$attrs"
            :percentage="showPercentage"
            v-on="$listeners"
        ></el-progress>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
/**
 *
 * el-progress组件增强
 * 当鼠标移动到组件上时会触发一个动画效果
 *
 * 用法和el-progress一样
 *
 */
@Component({
    name: "ZbProgress"
})
export default class ZbProgress extends Vue {
    // 百分比
    @Prop() percentage!: any;
    // 监听百分比数值
    @Watch("percentage", { immediate: true })
    updatePercentage(v: number) {
        // 因为需要通过改变百分比来实现动画效果
        // 所以这里将具体值赋值给一个内部字段
        this.showPercentage = v;
    }
    // 动画执行时间（毫秒）
    @Prop({ default: 200 }) animationTime!: number;
    // 动画波动百分比变化范围
    // 可以为负值
    @Prop({ default: 30 }) animationRange!: number;
    // 百分比显示值
    showPercentage: number = 0;

    // 是否正在执行动画
    isAnimationIng: boolean = false;
    // 上传鼠标离开元素时间
    outTime: number = 0;
    // 当鼠标移动到元素内时
    onMouseover() {
        // console.log("onMouseover鼠标移动到");
        // 获取鼠标上次离开时间
        const outTime = this.outTime;
        // 是否执行动画
        let is = true;
        if (outTime) {
            // 如果上次离开时间与当前时间间隔太短
            // 说明鼠标并没有真正的离开当前元素，只是在内部移动
            // 此时不执行动画
            is = new Date().getTime() - outTime > 100;
        }
        if (is) {
            // 执行动画
            this.showAnimation(this.showPercentage);
        }
    }
    // 当鼠标离开时
    onMouseout() {
        // console.log("onMouseout鼠标离开");
        // 记录当前离开时间
        this.outTime = new Date().getTime();
    }
    // 执行动画
    showAnimation(v: number) {
        const me = this as any;
        // 如果没用正在执行动画
        if (!me.isAnimationIng) {
            // 标识动画效果正则执行
            me.isAnimationIng = true;
            const {
                // 动画波动百分比变化范围
                animationRange,
                // 动画执行时间（毫秒）
                animationTime
            } = me;
            // 获取下个动画波动值
            let percentage = v - animationRange;
            // 将波动值限制到0-100
            if (percentage <= 0) {
                percentage = 0;
            } else if (percentage >= 100) {
                percentage = 100;
            }
            // 设置动画波动值
            me.showPercentage = percentage;
            setTimeout(() => {
                // 延迟执行重置百分比，这样就能实现一个波动动效
                me.showPercentage = v;
                setTimeout(() => {
                    // 延迟标识动画效果已经结束
                    me.isAnimationIng = false;
                }, 200);
            }, animationTime);
        }
    }
}
</script>

 使用

<template>
    <div>
        <zb-progress :show-text="false" :stroke-width="26" :percentage="70" :animationRange="-30">
        </zb-progress>
        <br />
        <zb-progress :show-text="false" :stroke-width="26" :percentage="30">
        </zb-progress>
        <br />
        <zb-progress :show-text="false" :stroke-width="26" :percentage="15" :animationTime='1000'>
        </zb-progress>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({ name: "elementProgress" })
export default class elementProgress extends Vue {}
</script>