In web development, Vue provides a simple and powerful animation system to achieve transition effects. 1. Use <transition> to wrap a single element to implement basic animation, define the animation name through the name attribute, and achieve the fade effect with the corresponding CSS class, where v-if control display is the key. 2. Use <transition-group> to combine the key attribute to add animations to multiple elements, such as the transition effect when the list is added or deleted, and you can set animation styles through CSS. 3. Combining CSS animation libraries such as Animate.css can quickly achieve more complex animation effects. Just specify enter-active-class and leave-active-class in <transition> to complete the integration. By mastering these methods, developers can efficiently create rich and smooth user interface interaction effects.

In web development, animation and transition effects can not only improve the user experience, but also make the interface more vivid. Vue provides a simple but powerful animation system, through transition and animation it is easy to achieve smooth transitions when component switching and element state changes.

1. Use <transition></transition> to wrap a single element to implement basic animation

Vue's <transition></transition> component can wrap any element or component, adding animation effects when entering (enter) and leaving (leave). It does not render to the actual DOM element and is only used to control the animation flow.

The way to use is very simple. You just need to place the target element between the <transition></transition> tags, specify a name (name attribute), and then write the corresponding CSS transition class name:

 <transition name="fade">
  <p v-if="show">This text fades</p>
</transition>

The corresponding CSS is written as follows:

 .fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

In this way, when show value changes, the text will have an animation effect of fading in or out. Note that v-if controls whether it is displayed or not. If you use v-show , you need to use <transition mode="in-out"> or other methods to handle it instead.

2. Use <transition-group> to implement list animations of multiple elements

If you want to add animations to multiple items in a list, such as adding or deleting an item to produce a transition effect, you need to use <transition-group> . This component must be used with key , and each child element must have a unique key value.

The sample code is as follows:

 <transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

The CSS part can be written like this:

 .list-enter-active, .list-leave-active {
  transition: all 0.5s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

In this way, when you push new data into the items array, or delete an element from the middle, you will see the corresponding animation effect. Note tag="ul" is used here to indicate that the final rendering is ul tag.

3. Combining the CSS animation library to simplify development

Although the transition system that comes with Vue is already very powerful, if you want more complex animations, such as bounce, rotation and other effects, you can directly introduce the CSS animation library, such as Animate.css .

The usage method is also very simple: first install and introduce Animate.css, and then set enter-active-class and leave-active-class in <transition> :

 <transition
  enter-active-class="animate__animated animate__fadeInDown"
  leave-active-class="animate__animated animate__fadeOutUp"
>
  <p v-if="show">This text will use the animation of Animate.css</p>
</transition>

It should be noted that the default enter/leave class in this mode will be overwritten, so there is no need to write additional CSS.

Basically that's it. Vue's animation mechanism is designed very friendly and not difficult to get started, but it is very flexible. As long as you master the basic usage of <transition></transition> and <transition-group> and combine it with some CSS animation techniques, you can create many practical and beautiful interactive effects.

The above is the detailed content of Vue Animation and Transition Effects. For more information, please follow other related articles on the PHP Chinese website!