I'm looking to add animation to a specific element once the route page finishes loading. This is not related to route page transitions. I've experimented with various methods, trying to animate a progress bar based on dynamic data values. I attempted using mount and destroyed methods to change classes, but it didn't seem to work. My goal is to pass a value from the data and have the progress bar animate accordingly when the page loads. check this image for reference
<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
},
]
}
}