級聯轉場

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

技術關鍵字

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

使用範例

基本用法

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

選擇器

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

類型

◄ livelyfalljellyblurflipcurtainspace ►

顯示

<template>
  <div class="w-full flex flex-col gap-4">
    <div class="example-ctrl grid grid-cols-1 gap-4 sm:grid-cols-2">
      <div class="w-full flex items-center gap-3 p-1">
        <div class="text-right text-nowrap">
          {{ t('選擇器') }}
        </div>
        <base-select
          v-model="selector"
          :options="selectorOptions"
          class="w-full flex-1"
        />
      </div>

      <div class="w-full flex items-center gap-3 p-1">
        <div class="text-right text-nowrap">
          {{ t('類型') }}
        </div>
        <select-stepper
          v-model="name"
          :options="nameOptions"
          class="w-full"
        />
      </div>

      <div class="rounded-xl bg-gray-200/40 sm:col-span-2">
        <base-checkbox
          v-model="visible"
          :label="t('顯示')"
        />
      </div>
    </div>

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

          <base-input
            v-model="data.name"
            :label="t('姓名')"
          />

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

          <base-input
            v-model="data.age"
            :label="t('年齡')"
          />

          <base-input
            v-model="data.type"
            :label="t('類型')"
          />

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

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

const { t } = useI18n()
const visible = ref(true)

const data = ref({
  name: 'codfish',
  email: 'hi@codlin.me',
  type: 'fish',
  age: 20,
  description: t('擅長的球類是地瓜球'),
})

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 上產生動畫。

原始碼

元件原始碼transition-cascade/範例原始碼transition-cascade/examples/

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;
}