Cascade Transition transition

Usage is the same as Vue Transition, except that the inner content elements also have transition animations.

Usage Examples

Basic Usage

Multiple built-in animations are available. Adjust the selector to specify which inner elements should animate.

Selector

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

Type

livelyfalljellyblurflipcurtainspace

Show

View example source code

<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">
          {{ t('選擇器') }}
        </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">
          {{ t('類型') }}
        </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="t('顯示')"
          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">
            {{ 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 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: '[email protected]',
  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>

How It Works

Based on Vue's built-in Transition component, the concept is the same as Throw List. During onLeave, all target elements are cloned and placed on document.body to produce animations.

Source Code

Component

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