I made a Vue page these two days, and I need to write an animation by myself, but the animation in the project is directly using the encapsulated animation class name in the element. So I thought why not use transtion?

Therefore, I referred to the two articles and generally had a certain understanding of the label transtion.

An introduction to

The first article is more teaching, the examples on vUE’s official website do not have very specific code, while this article posts more detailed code and GIF screenshots, really let people understand at first sight:

Click here: Transitions and Animations in VUE (detailed code demo and explanation)

harvest

1. The
tag can only be used to wrap single elements.

(2) If the
TAB is appearProp, perform the transition/animation the first time the page is loaded. When I was trying to use Transition, I wondered why I didn’t animate the first time I loaded it. I read this article to see why.

3. In both transition and animation, the principle is to add and remove the class name for the outermost element of the transtion package at a specific time.

So do you have a question at this time? Why does Vue know when an animation or transition is done? This is because Vue listens for the transitionEnd and animationEnd events of the target element (the outermost element wrapped by the transition tag). I had never heard of either of these events before, so this is a great experience. API details: TransitionEnd event and AnimationEnd event

5. If you do not define the first class name (appear-active-class, etc.), you will use the same class names (enter-active-class, etc.).

6. The transition doesn’t have to be a single element. You can have more than one element, but you must use V-if to control whether it is explicit or implicit. Ensure that there can be only one single element in the display state.

7. The v-Enter class name is rarely used when using an animation, because the start and end states of the animation are usually required. However, when the transition is used, it acts as a form or 0% of the animation, specifying the starting state. V-enter -to is a bit of a no-brainer, and I don’t know when I’ll need it.

Duration specifies how long the animation will take to complete, when specified. The transitionEnd and animationEnd events are no longer used to determine when the class name will be deleted. Delete the class name when the time is up. If duration is longer than animation-duration or tansition-duration, the class name will not be deleted after the animation or transition is completed. The application scenario is:

We can have an elaborate series of transition effects, where some nested internal elements have a delayed or longer transition effect than the root element of the transition effect. “– from the website

9, JS hook function should be used to write JS animation, but this I do not use much, no say, not to say.

The advanced

The following article is a source-level interpretation of the transition component implementation principle.

(12) : The transition component implementation principle does not make the transition/animation become a short board

But… Unfortunately, I didn’t understand most of the code, let alone a lot of the technical terms. I just want to post it for those students with better foundation can more convenient point to see.. Or if I’m able to read it later.

harvest

The lesson here is simple. The question at the end of the article: Explain how the Transition component works:

The Transition component is an abstract component that does not render any DOM elements. It is designed to make it easier to animate objects. Transition animates a single child node in the form of a slot. During the render phase, a transition property is attached to the data property of the child’s virtual DOM, representing a node that is wrapped by the transition component. The transition component internal hook is executed in the PATH phase. The hook is divided into enter and leave states, and the status of the wrapped child node is switched using v-if or V-show. You can use both CSS and JavaScript hooks. Using CSS, class names are added and removed in the Enter /leave state. The user simply animates the class names. If you use JavaScript hooks, the specified functions are executed in order, and these functions need to be defined by the user. The component just controls the flow of this.

conclusion

Unfortunately, I still don’t understand the above. I hope I will come back to this article after I have a deeper understanding of VUE. Fortunately, after reading the first article, I had a basic understanding of how to use the Transition tag.