Vue頁面過渡動畫實現及常用動畫效果

Vue是一款受歡迎的JavaScript框架，它透過資料驅動的方式，協助開發者建立互動性強、資料呈現美觀的單頁 Web 應用程式。 Vue內建了許多有用的特性，其中之一就是頁面過渡動畫。在本文中，我們將介紹如何使用Vue的過渡動畫功能，並討論最常見的動畫效果。

實作Vue頁面過渡動畫

Vue的頁面過渡動畫是透過Vue的<transition></transition>與<transition-group></transition-group>元件實現的。下面我們分別介紹這兩個組件。

<transition></transition>

<transition></transition>元件可以在被包裹的元素在插入、更新或移除時，自動執行過渡動畫效果。

該元件向外部發出before-enter、enter、after-enter、enter-cancelled和before-leave、leave、after-leave、leave-cancelled等鉤子函數，讓我們可以控制過渡的開始、結束和取消。

下面是一個簡單的<transition></transition>動畫效果，展示了一個元素在插入時的過渡動畫。請注意，該元件需要一個name屬性，用於指定動畫的名稱。在下面的例子中，動畫名稱是fade。這裡的CSS樣式定義了開始和結束時元素的轉換動畫效果。

<template>
  <div>
    <button @click="show = !show">Toggle show</button>
    <transition name="fade">
      <div v-if="show">Hello Vue!</div>
    </transition>
  </div>
</template>

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

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

<transition-group></transition-group>

<transition-group></transition-group>元件與<transition></transition>很相似，但它適用於列表項目或表格等需要同時進行插入和移除的元素。

與<transition></transition>元件一樣，在<transition-group></transition-group>元件中可以定義鉤子函數，如before-enter 、enter等。

<transition-group></transition-group>需要指定一個tag屬性，用於指定過渡元件產生的HTML標籤類型。它還需要每個子元素帶有一個唯一的鍵值，使Vue可以正確地識別插入、更新或移除的元素。

在下面的例子中，我們展示了一個簡單的列表，每當點擊按鈕時，都會新增或刪除一項。在這個例子中，我們使用了<transition-group></transition-group>元件，並且指定了HTML標籤類型為ul。清單中的每個項目都帶有一個鍵值，以幫助Vue正確地執行過渡動畫。

<template>
  <div>
    <button @click="shift()">Add/Remove Item</button>
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item">{{ item }}</li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"],
    };
  },
  methods: {
    shift() {
      if (this.items.length > 0) {
        this.items.shift();
      } else {
        this.items.push("New Item");
      }
    },
  },
};
</script>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.5s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

常用的過渡動畫效果

現在，我們已經介紹如何使用Vue的過渡動畫。下面讓我們來看看一些常見的過渡動畫效果。

Fade

Fade效果用於漸隱或漸顯的效果。它將元素的不透明度從0變化到1或從1變化到0。

<transition name="fade">
  <div v-if="show">Hello Vue!</div>
</transition>

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

Slide

Slide效果用於元素從一側滑出或滑動到一側的效果。它將元素的位置從一個位置移動到另一個位置。

<transition name="slide">
  <div v-if="show">Hello Vue!</div>
</transition>

<style>
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter-to,
.slide-leave {
  transform: translateX(100%);
}
.slide-enter,
.slide-leave-to {
  transform: translateX(-100%);
}
</style>

Scale

Scale效果用於元素從小到大或從大到小的縮放效果。它將元素的寬度和高度從一種大小縮小到另一種大小。

<template>
  <div>
    <button @click="show = !show">Toggle show</button>
    <transition name="scale">
      <div v-if="show" class="box"></div>
    </transition>
  </div>
</template>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
.scale-enter-active,
.scale-leave-active {
  transition: transform 0.5s;
}
.scale-enter,
.scale-leave-to {
  transform: scale(0);
}
</style>

Rotate

Rotate效果用於元素繞著一個軸旋轉的效果。它將元素繞著一個角度旋轉。

<template>
  <div>
    <button @click="show = !show">Toggle show</button>
    <transition name="rotate">
      <div v-if="show" class="box"></div>
    </transition>
  </div>
</template>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
.rotate-enter-active,
.rotate-leave-active {
  transition: transform 0.5s;
}
.rotate-enter,
.rotate-leave-to {
  transform: rotate(180deg);
}
</style>

總結

Vue的過渡動畫功能可以讓我們在頁面元素插入、更新或移除時，添加動畫過渡效果，從而使頁面更加生動有趣。本文介紹如何使用Vue的<transition></transition>和<transition-group></transition-group>元件來實現過渡動畫，也介紹了幾個常用的過渡動畫效果。如果您需要為您的Vue應用程式添加動畫效果，不妨透過這些元件來嘗試。

以上是Vue頁面過渡動畫實現及常用動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！