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

Question

我只想在路由页面加载完成时为特定元素设置动画。它不是路由页面转换。我尝试了很多方法。它是一个进度条，根据数据值动态显示百分比。我已经尝试使用 mount destroyed 方法更改类，但它不起作用。我的要求是我想从数据中传递值，并根据该值，在页面加载时进度条应该是动画的。 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
        },
      ]
    }
  }

Answer 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>