vant进度条实现过渡动画

<template>
  <div class="test-content">

    <div class="pross">
      <van-progress
          :percentage="percentage"
          :stroke-width="10"
          color="#1989fa"
          track-color="#e5e5e5"
      />
      <van-button @click="startAnimation">开始动画</van-button>
    </div>


  </div>
</template>

<script>
export default {
  components: {
  },
  data(){
    return {
      percentage: 0, // 初始进度
      targetPercentage: 80, // 目标进度
      animationDuration: 5000 // 动画持续时间（毫秒）
    }
  },
  mounted() {
  },
  methods:{
    startAnimation() {
      this.percentage = 0; // 重置进度
      // 通过递归函数实现动画效果
      this.animateProgress(0);
    },
    animateProgress(currentPercentage) {
      if (currentPercentage < this.targetPercentage) {
        // 如果当前进度小于目标进度，则递增进度
        const step = Math.ceil((this.targetPercentage / this.animationDuration) * 10);
        this.percentage = Math.min(currentPercentage + step, this.targetPercentage);
        // 使用 requestAnimationFrame 控制动画帧率
        requestAnimationFrame(() => {
          this.animateProgress(this.percentage);
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.test-content{
  .pross{
    margin-top: 20px;
    ::v-deep .van-progress__pivot{
      transition: width 0.5s ease-in-out;
    }
  }

}
</style>

效果图