Vue.js 在Vue中设置绑定到数据属性的div宽度的动画

我有一个进度条div，它的宽度绑定到数据属性结果，并相应地改变。目前它仍在跳跃，但我想给它设置动画。我曾想过跟踪旧值和新值，并使用css变量将其注入css中，或者仅仅使用setInterval方法，但跟踪这两个值似乎变得相当复杂，对我来说似乎是一种过度的操作。有人有更简单的想法吗

<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 {
  animation: load 3s normal forwards;
  border-radius: 100px;
  background: #fff;
  height: 30px;
  text-align: center;
}

/* @keyframes load {
  0% {
width: 
  }
  100% {
    width: 
  }
} */
</style>

{{result}}}%
导出默认值{
道具：[“结果”]，
};
.进展{
背景：#ccc；
边界半径：100px；
位置：相对位置；
填充物：5px 5px；
保证金：5px 5px；
高度：40px；
宽度：自动；
}
.进度价值{
动画：加载3s正常向前；
边界半径：100px；
背景：#fff；
高度：30px；
文本对齐：居中；
}
/*@关键帧加载{
0% {
宽度：
}
100% {
宽度：
}
} */

像这样添加css转换：

转换属性：全部；
过渡计时功能：立方贝塞尔（0.4,0,0.2,1）；
过渡时间：1s；

并修复绑定：

{{result}}}%
导出默认值{
数据（）{
返回{
结果：5
}
},
安装的（）{
这个。增量（）
},
方法：{
增量（）{
这个结果+=10
如果（该结果<95）{
setTimeout（此增量为1000）
}
}
}
}
.进展{
背景：#ccc；
边界半径：100px；
位置：相对位置；
填充物：5px 5px；
保证金：5px 5px；
高度：40px；
宽度：自动；
}
.进度价值{
过渡性质：全部；
过渡计时功能：立方贝塞尔（0.4,0,0.2,1）；
过渡时间：1s；
背景：#fff；
高度：30px；
文本对齐：居中；
}

谢谢！添加css转换修复了它！样式绑定对我来说是双向的。