Vue proporciona un componente de transición que permite a los usuarios agregar efectos de animación de transición de manera más conveniente.
componente de transición
El componente de transición también es un componente abstracto y no representa el DOM real. Vue agregará un efecto de transición en su primer elemento hijo real.
accesorios
prestar
El renderizado se divide aquí en dos partes: la primera define los nodos secundarios que realmente añaden el efecto de transición.
primera parte
Primero obtenga los elementos secundarios de la transición (a través de la ranura predeterminada $slots.default). Los nodos secundarios deben tener las siguientes características:
1. El elemento hijo existe y no es un nodo de texto.
2. Solo existe un elemento secundario; de lo contrario, la consola le solicitará que use el grupo de transición.
3. El propósito de hasParentTransition es evitar la adición repetida de efectos de transición cuando el componente de transición es el nodo raíz del componente principal y hay un componente de transición fuera del componente principal, es decir, el componente principal también se ha agregado con una transición. efecto. Aquí necesita saber sobre los padres.
Cuando se ejecuta la función vue.prototype._render, el padre (es decir, el vnode marcador de posición) se configurará para el _vnode devuelto por la función de renderizado. Entonces, solo cuando el componente de transición es el componente raíz en el componente actual, el $vnode del componente de transición tiene el atributo principal; y el nodo marcador de posición del componente actual también tiene el atributo de transición, es decir, el nodo marcador de posición del El componente actual también tiene un atributo de transición ajustado. Esto significa que el efecto de transición se agrega repetidamente y solo es necesario ejecutar el efecto de transición más externo.
4. getRealChild, para evitar que los elementos secundarios también sean componentes abstractos y necesiten obtener los elementos secundarios reales.
la segunda parte
1. Defina la identificación y la clave del nodo secundario real.
2. extractTransitionData proporciona las propiedades y el tiempo vinculado al componente de transición a los nodos secundarios reales.
3. Obtenga el nodo raíz del componente a través del atributo _vnode del componente de transición, defínalo como oldChild y actualice el atributo oldChild.
4. Realizar las acciones correspondientes según la categoría de modo.
modo
Aquí, el modo se saca y explica por separado.
-
in-out: El nuevo elemento realizará la transición primero y luego el elemento actual desaparecerá. -
out-in: El elemento actual realiza la transición primero y luego el nuevo elemento realiza la transición.
Los funcionarios dicen que el modo de transición parece compensar la falta de coordinación entre las animaciones de múltiples elementos . Por ejemplo, los efectos de entrada/salida aparecen al mismo tiempo: cn.vuejs.org/v2/guide/tr…
El principio de implementación es agregar muchos ganchos al atributo data.hook para poder controlar el orden de ejecución de la animación de efectos especiales.
por fin
De hecho, el componente de transición no es difícil y se basa principalmente en varios requisitos previos.
El punto más complicado es realizar la detección de límites y cómo evitar la adición repetida de efectos de transición.
Después del análisis general, parece que no hemos descubierto cómo el componente de transición controla la animación de transición, ni sabemos cómo leer y llamar las funciones de enlace definidas por el usuario y varios atributos.