I have a list that is animated by a Vue.js transition-group, named ‘list’, and the CSS Class .list-move appears to be getting applied and removed multiple times per second that is causing stilted animations / flickering animations. This appears to only be affecting Safari and Chrome, Firefox works as intended.
The array the list is generated from (numberList) only changes every 5 ~ 10 seconds.
Does anyone have any clues as to why Vue's animations would be flickering like that?
The transition-group and CSS are set up the same as this Vue.js doc - https://v2.vuejs.org/v2/guide/transitions.html#List-Move-Transitions
Vue Template:
<transition-group name="list" tag="ul">
<li v-for="(item, index) in numberList" v-bind:key="item.no">
{{ index }}
</li>
</transition-group>
CSS
.list-move {
transition: transform 0.4s;
}
GIFs below show the flickering effects:
