Javascript Vue js在路由页面时为元素添加动画

我只想在路由页面加载完成时设置特定元素的动画。它不是路由页面转换。我试过很多方法。它是一个进度条，用于根据数据值动态设置百分比动画。我已经尝试过改变类的方法，但它不起作用。 我的要求是，我想从数据中传递值，并根据该值，在加载页面时，进度条应具有动画效果。

---

这就是我想要的。

我得到了下面的解决方案

@-moz关键帧动画条{
0%{宽度：0%；}
}
@-webkit关键帧动画栏{
0%{宽度：0%；}
}
@-ms关键帧动画栏{
0%{宽度：0%；}
}
@-o-关键帧为条设置动画{
0%{宽度：0%；}
}
@-关键帧为栏设置动画{
0%{宽度：0%；}
}
.图表{
背景色：#达达达；
高度：2倍；
位置：相对位置；
}
.图表.条形图{
背景色：#3D98C6；
身高：100%；
-moz动画：为条1.25s 1线性设置动画；
-webkit动画：动画条1.25s 1线性；
-ms动画：动画条1.25s 1线性；
-o动画：为1.25s 1线性条设置动画；
动画：动画条1.25s 1线性；
}

---

我想您正在寻找这样一个信息：每次导航都会触发警卫。您可以使用

.beforeach

显示条形图，使用

.afterEach

填充条形图。

<div class="media-body">
     <div class="progress">
           <div class="progress-bar progress-bar-warning" v-bind:class="{rating: isAnimate}">
         </div>
     </div>
 </div>