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

This article mainly introduces how to achieve transition animation in Vue3 related knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe you read this Vue3 in how to achieve the transition animation effect article will have a harvest, let's take a look at it.

Transition component of Vue

The transition component is available in Vue, which automatically adds an entry / exit transition to an element in one of the following situations:

Rendering with v-if conditions

Display using v-show conditions

Dynamic component

Component root node

The way to use it is also relatively simple, you need to wrap the components or elements that need to be animated with components, and then define a set of class.

Transition demo

The following code shows the basic usage of the component:

Show and hide

Import {ref} from 'vue'import HelloWorld from'. / components/HelloWorld.vue'const helloWorldShow = ref (true) # app {/ * more css * /} / * the style before and after entering * /. Transition: opacity 0.5s ease active {/ * add transition animation * / transition: add transition animation * / } / * style after entering and before leaving * /. V _ opacity _ enter _ MB _ r _ r

Some of the class used above have the following meanings:

V-enter-from: defines the starting state of the transition. It takes effect before the element is inserted and removed at the next frame after the element is inserted.

V-enter-active: defines the state when 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 functions for entering the transition.

V-enter-to: defines 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 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 removed) and removed after the transition / animation is complete.

The following figure is a diagram from the Vue document, which perfectly explains the whole process.

Naming rules for class

The class name of the component does not have to be prefixed with a v -. In fact, we can customize the prefix by adding a name attribute, for example, all prefixes become ywz-.

Use animation

Earlier, we used the transition property to achieve the transition effect of component entry and departure, and now we can use the animation attribute to achieve it. The sample code is as follows:

Css

/ * the style in the process of leaving and entering * /. V _ talk _ enter _ active. V _ talk _ active {/ * add transition animation * / transition: opacity 0.5s ease;} transition mode

First, look at a problem. When the animation switches between the two elements, a problem occurs. The code to reproduce the problem is as follows:

Show and hide

Import {ref} from 'vue'import HelloWorld from'. / components/HelloWorld.vue'const show = ref (true) / * omitted * /

We can see that in an instant the two components exist at the same time, and sometimes we don't need this effect, so we need to set the transition mode of the component, that is, the mode property, which contains three values:

Default: the new element occurs at the same time as the current element.

In-out: the new element enters the transition first, and then the current element transitions away.

Out-in: the current element goes through the exit transition first, and then the new element transitions in after completion.

After we understand this property, we modify the code as follows:

Appear attribute

The appear property of the component is used to open the manual-rendered animation, which accepts a Boolean value. The sample code is as follows:

The use of animate.css Library

If we write these animation sequences one by one in the actual development, then the efficiency is relatively low, so we often use some animation libraries, the most common is animate.css.

Now let's take a look at how to use animate.css in Vue:

Install animate.css

Npm i animate.css

Introduction of animate.css

/ / main.jsimport 'animate.css' uses animation sequence .v-enter-active {animation: fadeInDown 0.5s;} .v-leave-active {animation: fadeOutDown 0.5s;} use custom transition class

The component also provides properties to customize the transition class, as follows:

Enter-from-class

Enter-active-class

Enter-to-class

Leave-from-class

Leave-active-class

Leave-to-class

They will take precedence over ordinary class names.

This is the end of the article on "how to achieve transition animation in Vue3". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve transition animation in Vue3". If you want to learn more knowledge, you are welcome to follow the industry information channel.

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.