javascript - CSS animation only triggers upon first creation -

this first project using vuejs.

i've got main component. in main component i've got data variable array. example:

export default {     name: 'example-component',     data() {         return {             options: [                 {                     text: {                         nl: 'jan',                         en: 'john',                     },                     action: 'x1',                 },{                     text: {                         nl: 'jansen',                         en: 'doe',                     },                     action: 'x2',                 },             ],         }     }, } 

in template <example-component> i'm using v-for loop inside of component. shown below:

<my-other-component v-for="option in options" v-on:click.native="select(option.action)"     :key="option.id"></my-other-component> 

this seems work fine.

<my-other-component> has animation when appears on screen first time.

in methods section of example-component there's method empties options array , re-populates it, different objects, of course. if method run now, first 2 options not have animation, third, fourth, fifth, etc would.

so appears though animation trigger upon first creation of specific index in options array.

does know why , how fix issue?

ps: (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: infinite not solve issue. repeats animation. (-> 'options' disappear , reappear every 2.5s)

edit 2:

i have tried fiddle around bit. seems have timing. if there's enough time between deleting op options , adding them again animation seems work fine.

also, have tried different ways of emptying array, ie:

this.options = []; this.options.length = 0; this.options.splice(0, this.options.length); // , other goodness 

but don't seem affect issue.

https://vuejs.org/v2/guide/list.html#components-and-v-for

in 2.2.0+, when using v-for component, key required.

when vue updating list of elements rendered v-for, default uses “in-place patch” strategy. if order of data items has changed, instead of moving dom elements match order of items, vue patch each element in-place , make sure reflects should rendered @ particular index.

to give vue hint can track each node’s identity, , reuse , reorder existing elements, need provide unique key attribute each item. ideal value key unique id of each item.

basicly, if don't give each data object in loop unique id , bind element being looped, vue "patch" data when changes , won't touch dom.