How to transition in vue

Implementing page jumps in Vue is one of the common requirements in front-end development. It is also a good choice to implement transition effects during page jumps to enhance the user experience.

Vue provides a variety of ways to achieve page transition effects, and we will introduce them one by one next.

1. Vue Animation

Vue animation is an API officially provided by Vue. It is used to implement transition effects in Vue components. Vue animation needs to be implemented through Vue's transition mechanism. The transition mechanism hook function provides different methods to control the transition effect, for example:

• before-enter (before entering): before the element is inserted into the change
• enter (entering): the state when the element is inserted (startState)
• after-enter (entering): the state after the element insertion process is completed (endState)
• enter-cancelled: This hook will be called if entry is canceled.

The following is a sample code that uses Vue animation to achieve transition effects:

<transition name="fade">
  <router-view></router-view>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-active {
  opacity: 0;
}

In this example, an animation with a name equal to "fade" is bound to a router- In view, in order to show the transition effect, when a new page enters, it will have a gradient effect. The opacity will gradually increase from 0 to 1 over time. Similarly, when leaving the old page, there will be a gradient effect. The opacity will increase over time. Then gradually changes from 1 to 0.

2. Third-party library implementation

Vue transition effects can also be achieved through third-party libraries, among which the more popular ones are the following:

• transition-group: used when each component is interconnected
• vue-router-transition: used for page switching scenarios
• animated-vue: used for multiple Transition effects of other scenes

transition-group

transition-group can easily achieve animated transition effects between components such as lists and grids.

<transition-group name="list" tag="p">
  <span v-for="item in items" :key="item" class="list-item">{{ item }}</span>
</transition-group>

In this example, a span element is looped and added to the transition-group, each element has a key attribute set. They all have the same class name list-item. transition-group will dynamically add and remove these elements to achieve transition effects.

vue-router-transition

vue-router-transition is used to implement page transition effects in Vue Router. To use vue-router-transition, you only need to add the class names of v-enter and v-leave to the routing component of Vue Router. We can use CSS to define these styles to achieve transition effects.

<transition name="fade" mode="out-in">
  <router-view></router-view>
</transition>

// fade 动画实现方式同上

In this example, when two pages switch, the new page will be hidden first and placed on top of the old page, and then use CSS animation to achieve the transition effect of entering and leaving.

animated-vue

animated-vue is another library used to implement Vue transition effects. It provides multiple types of animations (entry, exit, pop-up, etc. ) to make our page transitions richer.

<transition appear :css="false" v-bind:enter-active-class="'animated fadeIn'" v-bind:leave-active-class="'animated fadeOut'">
  <router-view></router-view>
</transition>

In this example, we are using a CSS library called "animated", which provides several different CSS animations. We can use this library with Vue’s transition mechanism to achieve interesting page transition effects.

Summary

Implementing transition effects in Vue can not only bring a better experience to users, but also enhance the interactivity and aesthetics of the page. Vue provides a variety of built-in APIs and third-party libraries to achieve transition effects, and we can choose according to different needs and scenarios.

The above is the detailed content of How to transition in vue. For more information, please follow other related articles on the PHP Chinese website!