EP35 - ex7. List with Transitions

帶有過渡效果的列表，實用範例有些都帶有動畫效果
很值得練習啊！前端的精華都濃縮在一起～
動畫動畫動畫耶！～～～

App.vue

<!--
FLIP list transitions with the built-in <TransitionGroup>.
https://aerotwist.com/blog/flip-your-animations/
-->

<script setup>
import { shuffle as _shuffle } from 'lodash-es'
import { ref } from 'vue'

const getInitialItems = () => [1, 2, 3, 4, 5]
const items = ref(getInitialItems())
let id = items.value.length + 1

function insert() {
  const i = Math.round(Math.random() * items.value.length)
  items.value.splice(i, 0, id++)
}

function reset() {
  items.value = getInitialItems()
  id = items.value.length + 1
}

function shuffle() {
  items.value = _shuffle(items.value)
}

function remove(item) {
  const i = items.value.indexOf(item)
  if (i > -1) {
    items.value.splice(i, 1)
  }
}
</script>

<template>
  <button @click="insert">Insert at random index</button>
  <button @click="reset">Reset</button>
  <button @click="shuffle">Shuffle</button>

  <TransitionGroup tag="ul" name="fade" class="container">
    <li v-for="item in items" class="item" :key="item">
      {{ item }}
      <button @click="remove(item)">x</button>
    </li>
  </TransitionGroup>
</template>

<style>
.container {
  position: relative;
  padding: 0;
  list-style-type: none;
}

.item {
  width: 100%;
  height: 30px;
  background-color: #f3f3f3;
  border: 1px solid #666;
  box-sizing: border-box;
}

/* 1. declare transition */
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

/* 2. declare enter from and leave to state */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}

/* 3. ensure leaving items are taken out of layout flow so that moving
      animations can be calculated correctly. */
.fade-leave-active {
  position: absolute;
}
</style>

這是一個段範例代碼演示如何使用內建的 <TransitionGroup> 來實現 FLIP 列表過渡效果。

<script setup>

import { shuffle as _shuffle } from 'lodash-es'
import { ref } from 'vue'

這行代碼從 lodash-es 庫中引入 shuffle 函數並重命名為 _shuffle，同時從 vue 庫中引入 ref 函數。

const getInitialItems = () => [1, 2, 3, 4, 5]
const items = ref(getInitialItems())
let id = items.value.length + 1

這裡定義了一個函數 getInitialItems，返回一個初始數組 [1, 2, 3, 4, 5]。items 是一個響應式變量，用這個初始數組來初始化。id 是一個變量，用來跟踪新的項目的 ID，初始值為 items 的長度加 1。

function insert() {
  const i = Math.round(Math.random() * items.value.length)
  items.value.splice(i, 0, id++)
}

這個 insert 函數會在 items 的隨機位置插入一個新的項目，並使用 id 作為這個新項目的值，插入後 id 自增。

function reset() {
  items.value = getInitialItems()
  id = items.value.length + 1
}

這個 reset 函數會重置 items 為初始值，並重新設置 id。

function shuffle() {
  items.value = _shuffle(items.value)
}

這個 shuffle 函數會隨機打亂 items 的順序，使用的是 _shuffle 函數。

function remove(item) {
  const i = items.value.indexOf(item)
  if (i > -1) {
    items.value.splice(i, 1)
  }
}

這個 remove 函數會從 items 中移除指定的 item，如果找到該項目就使用 splice 方法移除它。

<template>

<button @click="insert">Insert at random index</button>
  <button @click="reset">Reset</button>
  <button @click="shuffle">Shuffle</button>

  <TransitionGroup tag="ul" name="fade" class="container">
    <li v-for="item in items" class="item" :key="item">
      {{ item }}
      <button @click="remove(item)">x</button>
    </li>
  </TransitionGroup>

在這個模板部分，有三個按鈕，分別用來插入新項目、重置和隨機打亂項目。使用 @click 綁定這些按鈕的點擊事件來調用相應的函數。

<TransitionGroup> 是一個 Vue 組件，用來給列表項目添加過渡效果。tag="ul" 指定這個組件渲染為一個 ul 標籤，name="fade" 是過渡效果的名稱，class="container" 設置了這個組件的 CSS 類。

<li v-for="item in items" 用來遍歷 items，每個項目渲染為一個 li，並設置了 key 屬性以幫助 Vue 跟踪這些項目。每個項目還有一個按鈕用來移除它。

<style>

<style>
.container {
  position: relative;
  padding: 0;
  list-style-type: none;
}

.item {
  width: 100%;
  height: 30px;
  background-color: #f3f3f3;
  border: 1px solid #666;
  box-sizing: border-box;
}

/* 1. declare transition */
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

/* 2. declare enter from and leave to state */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}

/* 3. ensure leaving items are taken out of layout flow so that moving
      animations can be calculated correctly. */
.fade-leave-active {
  position: absolute;
}
</style>

.container 類用來設置 ul 元素的樣式，設置 position 為 relative，取消內邊距，並取消列表樣式。

.item 類用來設置 li 元素的樣式，設置寬度為 100%、高度為 30px、背景顏色、邊框和 box-sizing。

.fade-move, .fade-enter-active,.fade-leave-active樣式用來設置過渡效果，transition 屬性設置了所有屬性的過渡時間為 0.5 秒，使用了 cubic-bezier 緩動函數。

.fade-enter-from, .fade-leave-to這段樣式設置了進入和離開時的狀態，設置透明度為 0，並縮放和移動元素。

.fade-leave-active這段樣式確保離開的項目從佈局流中移出，以便計算移動動畫。

什麼是Transition Group?

官方文件

在使用 Vue 的 <TransitionGroup> 和 <Transition> 組件來實現過渡效果時，CSS 樣式的宣告需要針對過渡效果的不同階段進行設置。這些階段的 CSS 類名遵循一定的命名規則。以下是如何知道哪些要宣告在 style 中，以及這些類名的用途：

過渡效果的名稱

當你在 <TransitionGroup> 或 <Transition> 組件中設置 name 屬性時，這個名稱會被用作 CSS 類名的前綴。例如，name="fade" 將會對應到 fade-enter-active、fade-enter-from 等 CSS 類名。

CSS 類名結構

Vue 使用特定的類名來表示過渡的不同階段：

1. 進入過渡 (Enter Transition)
2. • -enter-active：進入過渡的激活狀態，定義過渡效果。
   • -enter-from：進入過渡的起始狀態，元素在這個狀態開始過渡。
   • -enter-to：進入過渡的結束狀態，當過渡完成後元素會在這個狀態。
2. 離開過渡 (Leave Transition)
3. • -leave-active：離開過渡的激活狀態，定義過渡效果。
   • -leave-from：離開過渡的起始狀態，元素在這個狀態開始過渡。
   • -leave-to：離開過渡的結束狀態，當過渡完成後元素會在這個狀態。
3. 移動過渡 (Move Transition)
4. • -move：在 <TransitionGroup> 中移動元素時的狀態。

如何設置這些類名

你需要在 <style> 標籤中定義這些類名的樣式，來控制過渡效果。以下是一些範例：

<style>
/* 1. 宣告過渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

/* 2. 宣告進入的起始和終止狀態 */
.fade-enter-from {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}
.fade-enter-to {
  opacity: 1;
  transform: scaleY(1) translate(0, 0);
}

/* 3. 宣告離開的起始和終止狀態 */
.fade-leave-from {
  opacity: 1;
  transform: scaleY(1) translate(0, 0);
}
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}

/* 4. 確保離開的項目從佈局流中移出 */
.fade-leave-active {
  position: absolute;
}
</style>

很方便的動畫效果，感覺做一些簡單的小遊戲應該也是可以？
有機會練習一下各種動畫效果，看看他的極限好了www
會移動真好玩 www~~

動畫效果 List with Transitions