Conversión de lista en Vue
Ya sea un cambio de componente o un cambio de elemento único, solo puede haber un elemento o componente dentro de la etiqueta de transición a la vez.
Echemos un vistazo a la transición de la lista
La documentación oficial de vue escribe:
El modo de transición se refiere a mode='in-out'/'out - comando in', que especifica el orden de salida de la animación de transición y entrada a la animación de transición.
Para las listas, además de los efectos de animación de insertar elementos y eliminar elementos, también proporciona un efecto de animación: cuando la posición del elemento cambia, agregue una etiqueta de clase v-move. Usando este principio, podemos escribir así:
En el tutorial oficial de Vue, también existe este tipo de castaña:
Agregue etiquetas de clase de elementos de lista a todos los elementos y agregue reglas de transición , de modo que cuando cambie cualquier estilo CSS del elemento de la lista (entrar, salir, mover), se producirá un efecto de transición.
En nuestra regla CSS list-complete-leave-active, eliminamos el elemento que se eliminará del flujo de documentos; de lo contrario, el elemento que se eliminará permanecerá durante la transición de eliminación en el flujo de documentos. afectando así el efecto de transición de movimiento de los elementos detrás de él.
De esta manera, cuando insertamos o eliminamos un elemento que afecta la posición de otros elementos, estos elementos pasarán suavemente a la nueva posición con la ayuda del mecanismo de transición de movimiento en vue.
¿Cómo lograr una transición escalonada de elementos? Podemos configurar funciones de devolución de llamada con diferentes retrasos utilizando atributos con el prefijo del elemento data-.
La documentación oficial da un ejemplo interesante:
El enlace data-index=index del elemento li describe la posición de li en la lista, por lo que el elemento li está en la lista Cuanto más cerca esté la posición, antes se ejecutará la función de devolución de llamada correspondiente al efecto de transición.