Basic use of vue3 animation

1. Vue's transition animation

1. The basic use of transition

Note: The transition component wraps a single element or component

2. The principle of the transition component

3. The class of the transition animation

Note: If the transition component does not set the name attribute, then the class defaults to v-

4. Class naming rules and adding timing

Note: If we use a transition without a name, then all classes will be prefixed with v- by default;
if we add a name attribute, for example, then all classes will start with why-;

Two, animation animation

3. Set animation and transition at the same time

4. Display the specified animation time

Five, two elements switch mode attribute

5. Switching of dynamic components

6. The first rendering of appear