級聯轉場 transition

用法與 Vue Transition 一致，差別在容器內容元素也會有轉場動畫

技術關鍵字

名稱	描述
JS 動畫	基於 JavaScript 實現的動畫，達成更複雜、精準的動畫控制，常見套件有 GSAP、anime.js 等
Vue Transition	內建元件，可以處理單個項目的進出動畫

使用範例

基本用法

內建多個動畫，調整選擇器則可指定要哪些內部元素有動畫

選擇器

:scope > *:scope label, :scope input:scope input

類型

livelyfalljellyblurflipcurtainspace

顯示

查看範例原始碼

<template>
  <div class="w-full flex flex-col gap-4">
    <div class="grid grid-cols-2 gap-4 border rounded-xl p-4">
      <div class="w-full flex items-center gap-3 p-1">
        <div class="text-right text-nowrap">
          選擇器
        </div>
        <select
          v-model="selector"
          class="w-full flex-1 rounded-xl bg-slate-200/30 p-2"
        >
          <option
            v-for="option in selectorOptions"
            :key="option"
            :value="option"
          >
            {{ option }}
          </option>
        </select>
      </div>

      <div class="w-full flex items-center gap-3 p-1">
        <div class="text-right text-nowrap">
          類型
        </div>
        <select-stepper
          v-model="name"
          :options="nameOptions"
          class="w-full"
          select-class="w-full rounded-xl bg-slate-200/30"
        />
      </div>

      <div class="col-span-2 rounded-xl bg-gray-200/40">
        <base-checkbox
          v-model="visible"
          label="顯示"
          class="p-4"
        />
      </div>
    </div>

    <div class="min-h-[50vh] flex items-center justify-center">
      <transition-cascade
        :name
        :selector
      >
        <div
          v-if="visible"
          class="grid grid-cols-2 gap-2 border rounded-xl p-4"
        >
          <div class="col-span-2 rounded-xl bg-gray-300/50 p-2 text-center text-xl">
            個人資料
          </div>

          <base-input
            v-model="data.name"
            label="姓名"
          />

          <base-input
            v-model="data.email"
            label="Email"
          />

          <base-input
            v-model="data.age"
            label="年齡"
          />

          <base-input
            v-model="data.type"
            label="類型"
          />

          <base-input
            v-model="data.description"
            label="描述"
            class="col-span-2"
          />
        </div>
      </transition-cascade>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BaseCheckbox from '../../base-checkbox.vue'
import BaseInput from '../../base-input.vue'
import SelectStepper from '../../select-stepper.vue'
import TransitionCascade from '../transition-cascade.vue'
import { TransitionName } from '../type'

const visible = ref(true)

const data = ref({
  name: 'codfish',
  email: '[email protected]',
  type: 'fish',
  age: 20,
  description: '擅長的球類是地瓜球',
})

const selector = ref(':scope > *')
const selectorOptions = [
  ':scope > *',
  ':scope label, :scope input',
  ':scope input',
]

const name = ref(TransitionName.LIVELY)
const nameOptions = Object.values(TransitionName)
</script>

原理

基於 Vue 內建的 Transition 元件，概念同亂丟的清單，在 onLeave 時，將所有目標元素 clone 一份，放到 document.body 上產生動畫。

原始碼

元件

、範例

API

Props

type Selector = string | ((el: HTMLElement) => NodeListOf<Element> | Element[])

interface Props {
  name?: `${TransitionName}`;
  selector?: Selector;
  /** 自定義 enter，有則忽略 name */
  enter?: AnimeProvider;
  /** 自定義 leave，有則忽略 name */
  leave?: AnimeProvider;
}

Slots

interface Slots {
  default?: () => unknown;
}