Vue中如何使用過渡鉤子函數實現動畫過渡效果-Vue.js-PHP中文網

Vue中如何使用過渡鉤子函數實現動畫過渡效果

王林

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

原創

1301 人瀏覽過

近年來，前端技術的發展速度越來越快，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”回調函數，以完成離開過渡。