使用 Vue <TransitionGroup> 打造出色的卡片動態效果

是否覺得網站上的卡片或列表元素看起來呆板？
新增或移除元素時，總是顯得「生硬」且缺乏流暢感？
想像每次卡片新增或刪除時，只是閃現或消失，少了「滑入」或「優雅淡出」的視覺享受，難免讓人感到枯燥。

這時候，Vue 的 <TransitionGroup> 就是你的秘密武器！
它不僅讓元素的進出變得順滑自然，還讓程式碼保持簡潔優雅。

透過 <TransitionGroup>，你可以輕鬆為列表中的每個元素賦予生命，讓它們像魔法般滑動、淡入淡出。
無論是新增時的炫酷登場，還是刪除時的瀟灑退場，<TransitionGroup> 都能輕鬆搞定。

本文將帶你深入了解如何使用 <TransitionGroup>，並用簡單的程式碼實現視覺上的大變身。

準備好讓你的網頁從此告別呆板，用動態效果吸引使用者的目光吧！

動態元素新增或刪除的絕佳應用

以下是我們的 Vue 程式碼範例，其中包含卡片的新增與刪除，並使用 <TransitionGroup> 實現動態效果

• 完整程式碼

<script setup lang="ts">
import { ref } from "vue";

// 定義卡片資料的型別
interface Card {
  id: number; // 新增 ID 屬性，用於識別卡片
  icon: string;
  title: string;
}

// 使用型別定義卡片資料
const cards = ref<Card[]>([
  { id: 1, icon: "1", title: "Winter" },
  { id: 2, icon: "2", title: "Digital Technology" },
  { id: 3, icon: "3", title: "Globalization" },
  { id: 4, icon: "4", title: "New technologies" },
]);

// 新增卡片的函數
const addCard = () => {
  const newId = cards.value.length + 1;
  cards.value.push({
    id: newId,
    icon: newId.toString(),
    title: `New Card ${newId}`,
  });
};

// 移除卡片的函數
const removeCard = (index: number) => {
  cards.value.splice(index, 1);
};
</script>

<template>
  <div class="w-full h-screen flex flex-col items-center justify-center bg-gray-200">
    <!-- 新增卡片按鈕 -->
    <button
      @click="addCard"
      class="px-5 py-2 mb-10 bg-blue-500 text-white text-10 rounded-2 animate-bounce active:bg-blue-700"
    >
      新增卡片
    </button> 

    <!-- 卡片區域 -->
    <TransitionGroup name="card" tag="div" class="flex flex-nowrap justify-center gap-5">
      <label
        v-for="(card, index) in cards"
        :key="card.id"
        class="w-20 h-40 rounded-2xl bg-cover cursor-pointer overflow-hidden flex items-end transition-all duration-600 shadow-2xl relative group border border-gray-4 hover:border-blue-500 hover:border-2"
        
      >
        <div class="text-white flex">
          <div class="bg-gray-800 text-white text-sm rounded-full w-12 h-12 flex justify-center items-center m-4">
            {{ card.icon }}
          </div>
          <div class="flex flex-col justify-center overflow-hidden h-20 w-32 transition-all duration-300 ease-in-out">
            <h4 class="uppercase">{{ card.title }}</h4>
          </div>
        </div>
        <!-- 刪除按鈕 -->
        <button
          @click.stop="removeCard(index)"
          class="absolute top-1 right-1 bg-red-500 text-white p-1 w-6 h-6 flex items-center justify-center rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
        >
          ✕
        </button>
      </label>
    </TransitionGroup>
  </div>
</template>


<style scoped>
/* TransitionGroup 卡片進出效果設定樣式 */
.card-enter-active,
.card-leave-active {
  transition: transform 0.6s, opacity 0.6s;
}
.card-enter-from {
  transform: translateY(-20px);
  opacity: 0;
}
.card-leave-to {
  transform: translateY(20px);
  opacity: 0;
}
</style>

如何運用 <TransitionGroup>

<TransitionGroup> 的基本用法

在這個範例中，<TransitionGroup> 元素被用來包裹多個卡片元素。
<TransitionGroup> 必須設置 name 屬性，這個屬性用來指定動效過渡類別的前綴詞，從而幫助 Vue 確定應該應用哪些動效樣式。

這些樣式會自動地添加到進出元素的各個狀態（進入、過程、離開）。

<TransitionGroup name="card" tag="div" class="flex flex-nowrap justify-center gap-5">
  <!-- 卡片內容 -->
</TransitionGroup>

• 沒有加入動效的生硬畫面差異

• 卡片進入與離開的動效樣式

使用 CSS 配合 name="card"，我們定義了幾個動效樣式來實現卡片進入與離開的動效：

• .card-enter-active 與 .card-leave-active 控制進出動效的總持續時間與過渡效果。
• .card-enter-from 與 .card-leave-to 來定義動效的初始和最終狀態。

.card-enter-active,
.card-leave-active {
  transition: transform 0.6s, opacity 0.6s;
}
.card-enter-from {
  transform: translateY(-20px);
  opacity: 0;
}
.card-leave-to {
  transform: translateY(20px);
  opacity: 0;
}

這樣的設計讓卡片在進入時從上方滑入並逐漸變得不透明，而離開時則是向下滑出並逐漸透明。

可以看之前的本系列文 針對過渡類別的詳細解說 Day06 Vue.js 簡單迷人的網頁動態效果 - 過渡類別篇

• 新增和移除卡片的互動

我們在範例中提供了新增和刪除卡片的功能：

• 新增卡片：點擊按鈕觸發 addCard 函數，將新的卡片物件推入 cards 陣列中。
• 移除卡片：每張卡片上都配置了一個刪除按鈕，按下時會調用 removeCard 函數，從陣列中移除相應的卡片。

這些小技巧結合 <TransitionGroup> 的動效，提供了即時的視覺回饋，帶來更舒暢的使用者體驗，讓你的網頁在每個操作是那麼地優雅！

整合<TransitionGroup> 與 UnoCSS 預設動效：輕鬆打造流暢互動效果

• 新增卡片按鈕樣式解析

按鈕的class 屬性定義了多個樣式類別，除了基本的樣式視覺之外還有交互效果的使用方式。
特別是 animate-bounce 和 active:bg-blue-700 的使用重點：

<button
  @click="addCard"
  class="px-5 py-2 mb-10 bg-blue-500 text-white text-10 rounded-2 
	  animate-bounce active:bg-blue-700"
>
  新增卡片
</button>

• 屬性設計效果說明

• px-5 py-2：設置按鈕內邊距，提供適當的點擊區域。

• mb-10：按鈕底部外邊距，增加版面空間感。

• bg-blue-500：藍色背景，視覺醒目。

• text-white：白色文字，增強對比度。

• rounded-2：圓角邊框，柔和美觀。

• animate-bounce：按鈕輕微彈跳效果，吸引注意力。

• active:bg-blue-700：按鈕點擊時變深藍色，提供即時視覺回饋。

• UnoCSS 預定義動效樣式

UnoCSS 提供了一些內建的動效類別。
這些效果類別通常以 animate- 開頭，可以為元素添加簡單且常見的動效。
例如彈跳、淡入淡出、旋轉等。

• 常見的 UnoCSS 預定義動效：

1. animate-bounce

   • 使元素彈跳，類似於按鈕的點擊動效，吸引使用者注意。

2. animate-spin

   • 讓元素旋轉，通常用於加載指示器。

3. animate-ping

   • 元素會不斷從中心擴展並淡出，類似於脈衝效果，用於提示狀態變化。

4. animate-pulse

   • 讓元素有淡入淡出的效果，模擬心跳，適合用於提醒元素或加載狀態。

5. animate-wiggle

   • 讓元素輕微左右搖動，常用於警告或需要強調的按鈕。

6. animate-flip

   • 元素水平或垂直翻轉，適合用於卡片翻轉的動效樣式。

這些動效類別可直接使用，不需自訂 @keyframes，適合快速添加互動效果，是不是很方便呢？

結語

透過這次文章，你可以學到以下三個核心重點：

• 流暢自然的元素動態效果：使用 <TransitionGroup> 讓卡片的新增與刪除擁有滑入、淡出的視覺享受，增強使用者互動體驗。

• 簡潔且易維護的程式碼：透過簡單的設計就能達成出色的動效，保持程式碼優雅明瞭，讓你前端開發效率一樣順暢！

• 快速應用 UnoCSS 預設動效樣式：利用像 animate-bounce 這樣的類別，輕鬆為按鈕和元素增添動感，提升整體視覺吸引力。