Vue中如何使用过渡钩子函数实现动画过渡效果-Vue.js-PHP中文网

Vue中如何使用过渡钩子函数实现动画过渡效果

王林

发布： 2023-06-11 09:18:39

原创

1314 人浏览过

近年来，前端技术的发展速度越来越快，Vue框架已成为Web开发中备受欢迎的前端框架之一。Vue框架提供了强大且灵活的动画效果，这使得我们的Web界面更加生动和吸引人，提升了用户体验。Vue中使用过渡钩子函数实现动画过渡效果则是其中的一种常用方式。

什么是过渡钩子函数

Vue中对于过渡的处理并不是通过CSS的transition，而是通过动态类名和JS钩子函数的配合来实现的。Vue提供了6个钩子函数，分别是“before-enter”，“enter”，“after-enter”，“enter-cancelled”，“before-leave”和“leave”。

过渡钩子函数的使用方法

当一个元素进入或者离开DOM时，会触发过渡的状态，这时我们可以使用相应的钩子函数来定义过渡效果。我们可以在Vue组件的中通过“transition”标签来实现这种效果。

举个例子，我们可以在一个自定义组件中，使用“transition”标签来实现一个简单的淡出效果：

<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>

登录后复制

在上面的例子中，我们定义了一个名为“fade”的类，并分别定义其进入和离开时的过渡状态。然后在Vue组件中使用“v-show”指令来触发组件的显示和隐藏。

当组件的显示和隐藏被触发时，Vue会自动添加相应类名来实现淡出效果。此时，我们只需要在“style”标签中定义相应的过渡状态即可。

过渡钩子函数的参数

钩子函数的参数包括四个，在“before-enter”和“before-leave”函数中，只有一个参数，表示即将被插入或移除的DOM元素；其他四个钩子函数则分别有两个参数：

el：表示被插入的DOM元素；
done：表示过渡完成后的回调函数，该函数可以用于在动画完成后执行一些特定的操作;

接下来，我们给出一个完整的例子来演示过渡钩子函数的具体使用方法。

<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>

登录后复制

在上述例子中，我们定义了八个过渡钩子函数，分别对应组件进入和离开时的不同状态，进入和离开具体的过渡效果则由钩子函数来控制。

在进入组件时，“before-enter”钩子函数设置了元素的开始状态，而“enter”钩子函数则对元素进行了过渡设置，然后通过“transitionend”事件绑定“done”回调函数，以完成过渡。

同样在离开组件时，“before-leave”函数先设置了元素的开始状态，然后“leave”钩子函数设置了离开的过渡状态，并通过“transitionend”事件绑定“done”回调函数，以完成离开过渡。