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

【问题标题】：Vue js add animate for element when route pageVue js在路由页面时为元素添加动画
【发布时间】：2017-07-16 18:04:07
【问题描述】：

我只想在路由页面加载完成时为特定元素设置动画。它不是路由页面转换。我尝试了很多方法。它是一个进度条动画百分比从数据值动态变化。我已经尝试了更改类的挂载销毁方法，但它不起作用。我的要求是我想从数据中传递值，并根据该值，在页面加载时进度条应该是动画的。 enter image description here

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

  .mybar {
    height: 5px;
    overflow: hidden;
    background-color: #C1C2C1;
    box-shadow: none;
  }
  .myactivebar {
    background-color: #B01058;
    float: left;
    box-shadow: none;
    transition: width 1s ease;
    height: 100%;
    width: 40%;
}
.rating {
  width:100%;
}

data() {
    return {
      isAnimate: false,
      technologies:[
        {
          title:'Vue Js',
          info:'progressive framework for building user interfaces.',
          logo:'https://vuejs.org/images/logo.png',
          rate:90
        },
      ]
    }
  }

【问题讨论】：

我认为您正在寻找这个：router.vuejs.org/en/advanced/navigation-guards.html 每次导航都会触发警卫。您可以使用.beforeEach 显示条形图，使用.afterEach 填充它。

标签： javascript css vue.js frontend vuejs2

【解决方案1】：

这实际上是我想要的。 enter image description here

我得到了下面的解决方案

@-moz-keyframes animate-bar {
    0%   { width: 0%; }
}

@-webkit-keyframes animate-bar {
    0%   { width: 0%; }
}

@-ms-keyframes animate-bar {
    0%   { width: 0%; }
}

@-o-keyframes animate-bar {
    0%   { width: 0%; }
}

@-keyframes animate-bar {
    0%   { width: 0%; }
}

.chart {
  background-color: #DADADA;
  height: 2px;
  position: relative;
}

.chart .bar {
  background-color: #3D98C6;
  height: 100%;
  -moz-animation: animate-bar 1.25s 1 linear;
  -webkit-animation: animate-bar 1.25s 1 linear;
  -ms-animation: animate-bar 1.25s 1 linear;
  -o-animation: animate-bar 1.25s 1 linear;
  animation: animate-bar 1.25s 1 linear;
}

<div class="chart">
   <div class="bar" style="width:60%;"></div>
</div>

【讨论】：