ルートページの要素のアニメーションを追加する

Question

ルートページの読み込みが完了したら、特定の要素をアニメーション化したいだけです。そのルートではないページの遷移。私は多くの方法を試みました。そのプログレスバーは、データ値からダイナミックにパーセンテージをアニメーション化します。私は変更クラスのためのマウントされたメソッドを破壊しようとしましたが、それは動作しません。 私の要件は、私はデータから値を渡したい、値に応じて、ページの読み込み時にプログレスバーをアニメーション化する。 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>