Vue js hinzufügen animieren für Element wenn Route Seite

Question

Ich möchte nur bestimmte Element animieren, wenn Route Seite laden abgeschlossen. sein nicht route Seitenübergang. Ich habe viele Möglichkeiten ausprobiert. Es ist ein Fortschrittsbalken, der den Prozentsatz des Datenwerts dynamisch erhöht. Ich habe mount zerstört Methode für Change-Klasse versucht, aber es funktioniert nicht. meine Anforderung ist, ich möchte Wert von Daten übergeben und je nach Wert, der Fortschrittsbalken shour animiert werden, wenn Seite geladen wird. 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

Das ist eigentlich das, was ich will. enter image description here

und ich bekam die Lösung unter

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