Vue provides a transition component that allows users to add transition animation effects more conveniently.
transition component
The transition component is also an abstract component and does not render the real DOM. Vue will add a transition effect on its first real child element.
props
render
The render is divided into two parts here. The first part defines the child nodes that actually add the transition effect.
first part
First get the child elements of the transition (through the default slot $slots.default). The child nodes need to have the following characteristics:
1. The child element exists and is not a text node
2. Only a single child element exists, otherwise the console will prompt you to use transition-group
3. The purpose of hasParentTransition is to prevent repeated addition of transition effects when the transition component is the root node of the parent component and there is a transition component outside the parent component, that is, the parent component has also been added with a transition effect. Here you need to know about the parent.
When the vue.prototype._render function is executed, the _vnode returned by the render function will be set to parent (that is, the placeholder vnode). Then, only when the transition component is the root component in the current component, the $vnode of the transition component has the parent attribute; and the placeholder node of the current component also has the transition attribute, that is, the placeholder node of the current component is also wrapped transition attribute. This means that the transition effect is added repeatedly, and only the outermost transition effect needs to be executed.
4. getRealChild, to avoid that the child elements are also abstract components and need to get the real child elements.
the second part
1. Define the id and key of the real child node
2. extractTransitionData gives the properties and time bound to the transition component to the real child nodes
3. Get the root node of the component through the _vnode attribute of the transition component, define it as oldChild, and update the oldChild attribute.
4. Perform corresponding actions according to the mode category.
mode
Here, the mode is taken out separately and explained.
-
in-out: The new element will transition first, and then the current element will transition away. -
out-in: The current element transitions first, and then the new element transitions in.
Officials say that the transition mode appears to make up for the incoordination between the animations of multiple elements . For example, the entering/leaving effects appear at the same time: cn.vuejs.org/v2/guide/tr…
The implementation principle is to add a lot of hooks to the data.hook attribute, so that the order of execution of special effects animation can be controlled.
at last
In fact, the transition component is not difficult, mainly based on various prerequisites.
The most convoluted point is to do boundary detection and how to prevent repeated addition of transition effects.
After the overall analysis, it seems that we have not discovered how the transition component controls the transition animation, nor do we know how to read and call the user-defined hook functions and various attributes.