How to use the transition component to achieve animated transition effects in Vue

Vue is a popular JavaScript framework that contains many useful components to help developers build front-end applications more efficiently. Among them, Vue's own transition component can be used to achieve animated transition effects, which can make application interaction smoother and more vivid. Next, this article will introduce how to use the transition component in Vue to achieve animated transition effects.

1. Basic knowledge

Before using Vue’s transition component, you need to understand some basic knowledge in Vue. The most important of these are hook functions, which are functions in the Vue component life cycle that are triggered when rendering and updating components. The transition component can use these hook functions to achieve transition effects.

Another thing to understand is the CSS transition class name in Vue. Vue provides several CSS class names through which animation transition effects can be set. The names include: v-enter, v-enter-active, v-enter-to, v-leave, v-leave-active and v-leave-to. These class names correspond to the transition states of entering and leaving, and relevant styles can be set in CSS to achieve animation effects.

2. Basic usage

The basic syntax for using the transition component is very simple. First, add the transition tag to the template, then wrap the elements to be transitioned, and then add or remove elements as needed through Vue's built-in v-if or v-show instructions.

For example, in the following code, we wrap a div element in a transition tag and use the v-if directive to control the element:

<template>
  <div>
    <transition>
      <div v-if="show">Hello world!</div>
    </transition>
    <button @click="toggle">Toggle visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    toggle() {
      this.show = !this.show
    }
  }
}
</script>

In the above example, we bind A toggle method is defined on the button. When the button is clicked, the value of show will be inverted, so the element will appear or disappear according to the value of show.

3. Use of hook function

Although the above example demonstrates a basic usage, it does not achieve any animation effect. In order to achieve the transition effect, you need to use some hook functions provided by Vue to control the different states of the transition.

These hook functions include: before-enter, enter, after-enter, enter-cancelled, before-leave, leave, after-leave and leave-cancelled. These hook functions will be triggered at different times when elements enter or leave. We can set the corresponding CSS transition class name in these hook functions to trigger the animation transition effect.

The following is a simple transition effect based on a hook function:

<template>
  <div>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      @leave-cancelled="leaveCancelled">
      <div :key="isShown">Hello world!</div>
    </transition>
    <button @click="toggle">Toggle visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShown: true
    }
  },
  methods: {
    toggle() {
      this.isShown = !this.isShown
    },
    beforeEnter(el) {
      el.style.opacity = 0
    },
    enter(el, done) {
      Velocity(el, { opacity: 1 }, { duration: 500 })
      done()
    },
    afterEnter(el) {
      el.style.opacity = ''
    },
    enterCancelled(el) {
      el.style.opacity = ''
    },
    beforeLeave(el) {
      el.style.opacity = 1
    },
    leave(el, done) {
      Velocity(el, { opacity: 0 }, { duration: 500 })
      done()
    },
    afterLeave(el) {
      el.style.opacity = ''
    },
    leaveCancelled(el) {
      el.style.opacity = ''
    }
  }
}
</script>

<style>
.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s;
}
</style>

In the above code, we bound a series of hook functions and introduced the Velocity.js library to complete the animation effect . We process elements differently in these hook functions and achieve complex transition effects by setting different CSS classes.

In addition, we need to add some CSS styles to the style sheet to set different transition animation effects. In the above code, the transparency gradient animation effect is achieved by setting the opacity property.

4. Conclusion

This article introduces the basic usage of the transition component and the use of hook functions in Vue. We can use these methods to achieve complex animation effects and make the application interaction more vivid and Smooth. It should be noted that user experience and page performance must be considered for transition effects, and the transition time should not be too long to avoid affecting page loading speed.

The above is the detailed content of How to use the transition component to achieve animated transition effects in Vue. For more information, please follow other related articles on the PHP Chinese website!