Vue文件中的自訂過渡函數應用實例分析-Vue.js-PHP中文網

Vue文件中的自訂過渡函數應用實例分析

王林

發布： 2023-06-21 09:30:07

原創

1317 人瀏覽過

Vue 自訂過渡函數用於在元素插入、更新和刪除時，控制其過渡效果的特定行為。此函數接受一個參數對象，包含需要過渡的元素、過渡類別名稱以及完成過渡的回呼函數。

在 Vue 中，過渡效果可以透過 CSS 類別名稱來實現。 Vue 在處理過渡效果時，會依照一定的順序將過渡類別名稱新增至元素上，從而觸發動畫效果。例如，在元素插入時會加上 “v-enter” 和 “v-enter-active” 類別名，並在元素完成插入後移除這兩個類別名稱。

但是，Vue 的預設過渡效果有些單調，很難滿足各種場景的需求。此時，我們可以利用 Vue 中提供的自訂過渡函數來實現更自由和靈活的過渡效果。

下面，我們透過一個實例來詳細介紹自訂過渡函數的使用方法。

自訂過渡函數範例

我們以一個圖片輪播元件為例，來示範如何使用 Vue 自訂過渡函數。此元件可實現自動輪播和手動切換圖片的功能。我們將使用自訂過渡函數來實現圖片的過渡效果。

元件模板

首先，我們定義一個輪播元件模板，其中包含一個顯示圖片和一個按鈕，用於手動切換圖片:

<template>
  <div class="carousel">
    <transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
      <img :src="currentImg" key="currentImg" class="image" />
    </transition>
    <div class="button-group">
      <button @click="prev">Prev</button>
      <button @click="next">Next</button>
    </div>
  </div>
</template>

登入後複製

元件資料與函數

接下來，我們定義組件的資料、計算屬性和方法：

<script>
export default {
  data() {
    return {
      imgs: [
        "https://placekitten.com/g/300/200",
        "https://placekitten.com/g/300/210",
        "https://placekitten.com/g/300/220"
      ],
      currentIndex: 0
    };
  },
  computed: {
    currentImg() {
      return this.imgs[this.currentIndex];
    }
  },
  methods: {
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.imgs.length) % this.imgs.length;
    },
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.imgs.length;
    },
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    enter(el, done) {
      const delay = el.dataset.index * 1000;
      setTimeout(() => {
        el.style.transition = "opacity 1s";
        el.style.opacity = 1;
        done();
      }, delay);
    },
    leave(el, done) {
      el.style.transition = "opacity 1s";
      el.style.opacity = 0;
      setTimeout(() => {
        done();
      }, 1000);
    }
  }
};
</script>

登入後複製

其中，imgs 數組包含了所有需要輪播的圖片鏈接，currentIndex 表示當前顯示的圖片索引。 currentImg 函數傳回目前圖片的連結。

prev 和 next 方法用於手動切換圖片。 beforeEnter、enter 和 leave 是自訂過渡函數，分別對應元素插入、更新和刪除過程中的過渡效果。

在 enter 過渡函數中，我們使用 setTimeout 來實現每張圖片在不同時間點顯示的效果。在 leave 過渡函數中，我們使用延時函數來等待動畫效果完成後再銷毀元素節點。