Transition 过渡动画

介绍

包含了一些常用动画样式。

渐入动画

通过 show 属性来控制动画的展示和隐藏，name 属性来设置动画名称。

<vd-transition :show="true" name="fade"></vd-transition>
<vd-transition :show="true" name="fade-up"></vd-transition>
<vd-transition :show="true" name="fade-down"></vd-transition>
<vd-transition :show="true" name="fade-left"></vd-transition>
<vd-transition :show="true" name="fade-right"></vd-transition>

进入动画

<vd-transition :show="true" name="slide-up"></vd-transition>
<vd-transition :show="true" name="slide-down"></vd-transition>
<vd-transition :show="true" name="slide-left"></vd-transition>
<vd-transition :show="true" name="slide-right"></vd-transition>

缩放动画

<vd-transition :show="true" name="zoom-in"></vd-transition>
<vd-transition :show="true" name="zoom-in-top"></vd-transition>
<vd-transition :show="true" name="zoom-in-bottom"></vd-transition>
<vd-transition :show="true" name="zoom-out"></vd-transition>

折叠动画

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

混合动画

<vd-transition :show="true" :name="custom1"></vd-transition>
<vd-transition :show="true" :name="custom2"></vd-transition>

import { TransitionName } from 'vital-design';

const custom1: TransitionName = {
  enter: 'slide-up',
  leave: 'zoom-in',
}

const custom2: TransitionName = {
  enter: 'slide-left',
  leave: 'zoom-out',
}

API

Props

参数	说明	类型	默认值
show	是否展示	boolean	false
name	动画名称	TransitionName	'fade'
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	-

代替原始 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	离开动画完成时触发	-

Slots

名称	说明
default	自定义内容