Exploring the world of Vuejs for the first time with my debut project.
The core of my project lies in the main component where I have an array as a data variable. Here's an example snippet:
export default {
name: 'example-component',
data() {
return {
options: [
{
text: {
nl: 'Jan',
en: 'John',
},
action: 'x1',
},{
text: {
nl: 'Jansen',
en: 'Doe',
},
action: 'x2',
},
],
}
},
}
Within the template of this <example-component>, a v-for loop is used inside another component. Here's a glimpse:
<my-other-component v-for="option in options" v-on:click.native="select(option.action)"
:key="option.id"></my-other-component>
Everything seems to be functioning smoothly.
<my-other-component> includes an animation that triggers when it is first displayed on the screen.
However, when a method in the methods section of example-component empties and repopulates the options array, the initial options lose their animation. Only new options added trigger the animation.
It seems like the animation is tied to the creation of specific indexes in the options array.
Any insights on why this behavior occurs and how to address this issue?
PS: Sharing the (relevant) CSS:
.option {
animation-timing-function: linear;
animation-name: option;
animation-duration: 2.5s;
}
@-webkit-keyframes option{
0% { opacity: 0; }
75% { opacity: 0; }
100% { opacity: 1; }
}
-
EDIT 1:
Adding
animation-iteration-count: infiniteEDIT 2:
Experimenting with timing the deletion and repopulation of options seems to impact the animation behavior. The issue persists despite trying various methods to clear the array.