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://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: