Tengo una lista que está animada por un grupo de transición de Vue.js, llamado 'lista', y el CSS Class .list-move parece aplicarse y eliminarse varias veces por segundo, lo que provoca animaciones forzadas/animaciones parpadeantes. Parece que esto solo afecta a Safari y Chrome, Firefox funciona según lo previsto.

La matriz a partir de la cual se genera la lista (numberList) solo cambia cada 5 ~ 10 segundos.

¿Alguien tiene alguna pista de por qué las animaciones de Vue parpadean así?

El grupo de transición y CSS están configurados de la misma manera que este documento de Vue.js: https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions

Plantilla Vue:

 <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; }

Los GIF a continuación muestran los efectos de parpadeo: