Vue中绑定result属性的进度条宽度实现平滑过渡动画的方法

最简实现方案 #

完全不需要写复杂的新旧值追踪、逐帧更新逻辑，仅靠浏览器原生的CSS过渡能力就能实现符合要求的平滑效果，总共只需要改1行CSS，完全不改动现有组件的逻辑结构。

问题根因 #

你之前考虑的CSS变量追踪新旧值、setInterval逐帧更新，本质都是在JS层手动实现浏览器已经原生支持的补间计算，对当前单属性动态变化的场景来说确实属于过度设计。
另外现有代码里写了一半的animation: load 3s normal forwards是组件挂载时跑一次的固定路径动画，对应的keyframe没补全本身就是无效样式，根本没法响应动态传入的result值变化。
只要给控制进度条宽度的元素加上width属性的过渡规则，不管绑定的result什么时候变、从多少变到多少，浏览器都会自动计算两个宽度值之间的补间动画，全程不需要你手动算中间帧、存旧值。

修正后的完整代码 #

<template>
      <div class="progress">
        <div class="progress-value" :style="{ 'width': result + '%' }">
          <h2>{{ result }}%</h2>
        </div>
  </div>
</template>

<script>
export default {
  props: ["result"],
};
</script>

<style scoped>
.progress {
  background: #ccc;
  border-radius: 100px;
  position: relative;
  padding: 5px 5px;
  margin: 5px 5px;
  height: 40px;
  width: auto;
}

.progress-value {
  border-radius: 100px;
  background: #fff;
  height: 30px;
  text-align: center;
  /* 新增这行即可实现平滑过渡，参数可根据体感调整 */
  transition: width 0.3s ease;
}
</style>

可调参数说明 #

• 过渡时长0.3s：一般0.2s-0.5s区间的过渡最自然，太短看不出效果，太长会显得交互拖沓。
• 缓动曲线ease：需要线性动效可以换成linear，需要更柔和的节奏可以替换为ease-in-out。

可选性能优化：如果后续遇到宽度变化触发重排的性能问题，可以把宽度实现替换为transform: scaleX()方案——通过元素缩放模拟宽度变化，只触发合成层动画不触发重排，但这个需要额外把transform-origin设置为左对齐，对当前需求来说属于非必需的优化项。

内容的提问来源于stack exchange，提问作者axylotl