How to use transition hook function to achieve animation transition effect in Vue

In recent years, front-end technology has been developing faster and faster, and the Vue framework has become one of the most popular front-end frameworks in web development. The Vue framework provides powerful and flexible animation effects, which makes our web interface more vivid and attractive, improving user experience. Using the transition hook function in Vue to achieve animation transition effects is one of the common ways.

1. What is the transition hook function

The transition processing in Vue is not through CSS transition, but through the combination of dynamic class name and JS hook function. . Vue provides 6 hook functions, namely "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave" and "leave".

2. How to use the transition hook function

When an element enters or leaves the DOM, the transition state will be triggered. At this time, we can use the corresponding hook function to define Transition effects. We can achieve this effect through the "transition" tag in the Vue component.

For example, we can use the "transition" tag in a custom component to achieve a simple fade-out effect:

<template>
  <div v-show="show" class="fade">
    <p>{{text}}</p>
    <button @click="show = false">关闭</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      text: '这是一个淡出效果'
    }
  }
}
</script>

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

In the above example, we defined a name is the class of "fade" and defines its transition state when entering and leaving respectively. Then use the "v-show" directive in the Vue component to trigger the display and hiding of the component.

When the display and hiding of a component is triggered, Vue will automatically add the corresponding class name to achieve the fade-out effect. At this point, we only need to define the corresponding transition state in the "style" tag.

3. Parameters of the transition hook function

The parameters of the hook function include four. In the "before-enter" and "before-leave" functions, there is only one parameter. Indicates the DOM element that will be inserted or removed; the other four hook functions have two parameters respectively:

• el: indicates the DOM element being inserted;
• done: indicates The callback function after the transition is completed, this function can be used to perform some specific operations after the animation is completed;

Next, we give a complete example to demonstrate the specific use of the transition hook function .

<template>
  <div>
    <button @click="show = !show">{{ show ? 'Hide' : 'Show' }}</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"

      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      @leave-cancelled="leaveCancelled"
    >
      <div v-show="show" class="box"></div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },

  methods: {
    beforeEnter: function(el) {
      el.style.opacity = 0;  // 设置元素开始状态
    },
    enter: function(el, done) {
      Vue.nextTick(() => {
        el.style.transition = 'opacity .5s';
        el.style.opacity = 1;    // 设置元素过渡状态
      });
      el.addEventListener('transitionend', done);
    },
    afterEnter: function(el) {
      el.style.transition = null;  // 设置元素结束状态
    },
    enterCancelled: function(el) {
      el.style.transition = null;  // 过渡取消时的回调函数
    },
    beforeLeave: function(el) {
      el.style.opacity = 1;  // 设置元素开始状态
    },
    leave: function(el, done) {
      Vue.nextTick(() => {          
        el.style.transition = 'opacity .5s';
        el.style.opacity = 0;  // 设置元素过渡状态
      });
      el.addEventListener('transitionend', done);
    },
    afterLeave: function(el) {
      el.style.transition = null;  // 设置元素结束状态
    },
    leaveCancelled: function(el) {
      el.style.transition = null;  // 过渡取消时的回调函数
    },
  },
};
</script>

<style>
.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
}
</style>

In the above example, we defined eight transition hook functions, which correspond to different states when the component enters and leaves. The specific transition effects of entering and leaving are controlled by hook functions.

When entering the component, the "before-enter" hook function sets the start state of the element, while the "enter" hook function sets the transition of the element, and then binds "done" through the "transitionend" event Callback function to complete the transition.

Similarly when leaving a component, the "before-leave" function first sets the start state of the element, and then the "leave" hook function sets the transition state of leaving, and binds "done" through the "transitionend" event Callback function to complete the leave transition.

4. Summary

In Vue, you can use the "transition" tag to achieve different transition effects, and define different states of transition through six hook functions. The use of transition hook functions is one of the key points that need to be mastered. Implementing transition effects through hook functions allows us to more flexibly control the transition state of components, thereby improving the user experience of web applications and achieving more vivid and attractive effects.

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