Cascade Transition transition

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

Tech Keywords

Name	Description
JS Animation	JavaScript-driven animation for more complex, precise control; popular libraries include GSAP and anime.js
Vue Transition	Built-in component that animates the enter/leave of a single element
Anime.js	Lightweight JavaScript animation library

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="example-ctrl grid grid-cols-2 gap-4">
      <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="col-span-2 rounded-xl bg-gray-200/40">
        <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>

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