Shulou(Shulou.com)06/01 Report--

This article mainly introduces the vue3 transition animation example analysis, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

1. A brief introduction to animation in vue

In vue, if some processes do not have animation effects, the results are relatively stiff. At this point we need to animate to make the page more flexible.

As shown in the code above, our H2 is just disappearing and switching back and forth, but the effect is stiff.

At this point we use the transition component to achieve the animation effect.

2. Transition animation of vue

The transition component can add a name attribute, and note that the value of the name attribute can be the first string in the class style. The above example will show the opacity gradient when it appears and disappears.

Third, the implementation principle of transition components.

The picture above shows the change of the class in the H2 tag during the switch back and forth. We can see that during the gradual transition, the vue realizes the animation effect by controlling the change of the class in the tag.

The specific process is as follows

1. When dom is inserted or deleted in the global component of transition, vue will automatically detect whether there is a relevant css style, and if so, add or delete class style at the appropriate time. 2. If transition provides a lifecycle hook, the hook will be called back at the appropriate time. 3. If there is no css style and no lifecycle hooks, then both dom inserts and deletions are performed immediately. 4. Class attribute v-enter-from of transition transition animation: defines the starting state of the transition. Takes effect before the element is inserted, removes the v-enter-active in the next frame after the element is inserted: defines the state in which the transition takes effect. Applied throughout the transition phase, effective before the element is inserted and removed after the transition / animation is complete. This class can be used to define the process time, delay, and curve function v-enter-to to enter the transition: define the end state of the transition. The next frame takes effect after the element is inserted (while the v-enter-from is removed) and removed after the transition / animation is complete. V-leave-from: defines the start state of leaving the transition. It takes effect immediately when the departure transition is triggered, and the next frame is removed. V-leave-active: defines the state when the departure transition takes effect. Applied throughout the phase of leaving the transition, it takes effect as soon as the leaving transition is triggered and removed after the transition / animation is complete. This class can be used to define the process time, delay, and curve functions that leave the transition. V-leave-to: leave the end of the transition. The next frame takes effect after the departure transition is triggered (while the v-leave-from is deleted), and the timing and naming rules for adding class are removed after the transition / animation is completed.

If it does not exist in transition, use v-instead, and if there is a name attribute, use the name why-enter-active.

6. Transition transition css animation

As shown in the figure, you only need to use enter-active, which is related to the animation style set by leave-active.

Consider: if there is a problem: what to do if we use both animation and transition in the same animation.

As shown in the figure above, we set the animation and transition effect, but the time of the two is not the same, so we can set the type property, one of which is animation and the other is transition, to tell the transition component the type of listening property.

7. The time of the specified animation displayed

You can set the duration property on the transition component, whose value can be of type number or type Object. Setting the time in this way is equivalent to forcing the time to be set, and the final effect will be displayed when the duration arrives at the time, regardless of whether the animation is completed or not.

VIII. The transition mode of transition

It can be understood that, as shown in the above code, we will use v-if and v-else to set both states. If the mode attribute does not exist, both states will be animated at the same time, resulting in an unfriendly user experience. In this case, we can set mode to set the two modes out-in and in-out,out-in to perform the removal of tag elements first, and then perform the displayed ones. In-out is the opposite.

IX. Switching of dynamic components

The animation of the component is used in the same way as the animation of general tags.

10. The first rendering of appear

We can use appear to animate the initial rendering.

11. Animate.css

Animate.css website

If the animation we use in the development is written by ourselves, this efficiency is relatively low, at this time we have a third-party library, in which there are some animations that we can use.

Steps to use:

First, install npm install animate.css

2. Import animate.css style

Third, use the animation or class provided by animate

Use css styl

Use CLA

Animate__animated is some configuration information style. As shown in the figure, there is some time, and the mode is set by default, so this class must be added, animate__.. Is the style that needs to be added.

12. Gsap library

Some lifecycle functions in transition, as shown in the figure above.

When you perform the transition animation, the done () callback is made, otherwise the synchronization occurs and the transition is completed immediately.

: css:false: indicates that vue ignores css detection and avoids the impact of css rules during the transition process, in addition to higher performance. The commonly used functions are enter and leave functions.

Detailed parameter settings of gsap

13. Gsap realizes digital change

14. Realize the transition of the list

Because when we use a transition component, it contains a single component, so what if we want to include multiple components in it? At this point we have a label transiton-group global component in which we can set up multiple tag contents.

Transition-group has the following characteristics:

1. The wrapper for an element is not rendered by default, but you can specify that it is rendered with a specified label. 2, transition mode is not available, because we do not switch specific elements 3, internal elements always need to provide a value of key:attribute 4, css transition style class, will act on the internal element, not on the external tag.

Case II of the staggered transition of the list

Thank you for reading this article carefully. I hope the article "sample Analysis of transition Animation in vue3" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.