TransitionCollapse 折叠动画

介绍

专为高度折叠设计的过渡组件，内置内容测高层，动画更稳定。API 与 Transition 基本一致，适合折叠面板、列表展开收起等场景。

普通淡入、位移、缩放等动画请继续使用 Transition；需要高度折叠时优先选用本组件。

基础用法

通过 show 控制展示，name 设置折叠动画类型。

<vd-transition-collapse :show="true" name="collapse"></vd-transition-collapse>
<vd-transition-collapse :show="true" name="collapse-fade"></vd-transition-collapse>
<vd-transition-collapse :show="true" name="enter-left"></vd-transition-collapse>
<vd-transition-collapse :show="true" name="enter-right"></vd-transition-collapse>

自定义折叠高度

通过 collapse-height 设置收起后的高度，大于 0 时收起后仍保持可见（适合内容预览、展开更多等场景）。该属性走布局 CSS 变量，可配合主题单位做响应式。

<vd-transition-collapse
  :show="expanded"
  :collapse-height="48"
>
  <view>完整内容...</view>
</vd-transition-collapse>

混合动画

<vd-transition-collapse :show="true" :name="custom"></vd-transition-collapse>

import type { TransitionCollapseName } from 'vital-design';

const custom: TransitionCollapseName = {
  enter: 'enter-right',
  leave: 'collapse-fade',
}

API

Props

参数	说明	类型	默认值
show	是否展示	boolean	false
name	动画名称	TransitionCollapseName	'collapse'
collapse-height	折叠后的高度；大于 0 时收起后仍保持可见	Numeric	0
duration	动画时长	TransitionDuration	300
delay	动画延时	TransitionDuration	0
immediate	初始化时如为展示状态，是否立即触发动画	boolean	true
lazy-render	是否懒渲染	boolean	true
cacheable	是否缓存节点，缓存节点后，切换展示状态时不会重新渲染节点	boolean	true
enter-from-class	进入动画起始类名	ClassValue	-
enter-active-class	进入动画进行中类名	ClassValue	-
enter-to-class	进入动画结束类名	ClassValue	-
leave-from-class	离开动画起始类名	ClassValue	-
leave-active-class	离开动画进行中类名	ClassValue	-
leave-to-class	离开动画结束类名	ClassValue	-
content-class	内容节点类名	ClassValue	-
content-style	内容节点样式	StyleValue	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
enter-from	进入动画开始时触发	-
enter-to	进入动画进行时触发	-
enter-end	进入动画完成时触发	-
leave-from	离开动画开始时触发	-
leave-to	离开动画进行时触发	-
leave-end	离开动画完成时触发	-
transitionend	过渡动画结束时触发	TransitionEvent

Slots

名称	说明
default	自定义内容

Expose

方法名	说明	参数	返回值
enter	执行进入动画	-	Promise<void>
leave	执行离开动画	-	Promise<void>

类型定义

组件导出以下类型定义：

import type {
  TransitionCollapseName,
  TransitionCollapseType,
  TransitionCollapseInstance,
  TransitionDuration,
} from 'vital-design';