Estoy completamente perplejo por esto. Por alguna razón, Vue3 aplicará correctamente la clase de animación de movimiento para un <transition-group/> que contenga una lista de elementos, pero solo si la lista avanza. Preparé un CodePen para esto e incluso con un caso de uso muy simple (numeración de números), las clases de transición simplemente no se aplican si avanza en cualquier dirección, excepto hacia atrás.
https://codepen.io/monitorjbl/pen/vYZPzXO
Si hace clic en el botón "-", se aplicarán las clases de animación y podrá ver cómo se activan las animaciones de movimiento. Sin embargo, al hacer clic en el botón "+" no se aplican clases de animación de movimiento ni animación alguna.
Como mencioné en sus comentarios, se está perdiendo las clases de transición de entrada y salida. Dado que solo está cambiando 3 elementos de la matriz en cualquier momento, eso significa que 2 elementos permanecerán en la lista y coincidirán con su clase de "mover", pero los 3 elementos se crearán/destruirán y usted no está manejando esos casos.
Si se refiere al ejemplo dado en la documentación de Vue , puede ver que se necesitan clases de transición de entrada/salida para unir todo. Por ejemplo, puede agregar esto a su CSS:
.flip-list-enter-from, .flip-list-leave-to { opacity: 0; } .flip-list-leave-active { position: absolute; }Aquí hay un ejemplo de prueba de concepto:
const Demo = { data() { return { min: 1, max: 5, list: [] }; }, mounted() { this.populateList(); }, methods: { shiftDown() { this.min -= 3; this.max -= 3; this.populateList(); }, shiftUp() { this.min += 3; this.max += 3; this.populateList(); }, populateList() { this.list = []; for (let i = this.min; i <= this.max; i++) { this.list.push(i); } } } }; Vue.createApp(Demo).mount("#flip-list-demo"); body { margin: 30px; } .flip-list-item { transition: all 0.8s ease; } .flip-list-enter-from, .flip-list-leave-to { opacity: 0; } .flip-list-leave-active { position: absolute; } <script src="https://unpkg.com/vue@next"></script> <div id="flip-list-demo"> <button @click="shiftDown" style="background-color:cyan">-</button> <button @click="shiftUp" style="background-color:yellow">+</button> <transition-group name="flip-list" tag="ul"> <li v-for="item in list" :key="item" class="flip-list-item"> {{ item }} </li> </transition-group> </div>