display: Transition family: utils

Transition

过渡动画组件, 兼容三端，小程序端要在 Transition 与 Transition.View 组件上加上统一的 transitionKey。

API

Transition

|名称 | 说明 | 类型 | 默认值 | |:---------------|:--------|:----|:----------| | in | 显示组件；触发进入或退出状态 | boolean | false | | appear | 第一次挂载就执行动画 | boolean | false | | mountOnEnter | 第一次进入后挂载组件，默认与 Transition 一起挂载 | boolean | false | | unmountOnExit | 退出后卸载此组件 | boolean | false | | transition | 必选, 设置过渡效果属性 TransitionType | { enter: TransitionType, exit: TransitionType } | | | styles | 必选, 设置进入和退出状态的样式 | { enter, exit } | | | onEnter | 开始进入时回调函数 | () => void | | | onExit | 开始退出时回调函数 | () => void | | | onEntering | 正在进入时回调函数 | () => void | | | onExiting | 正在退出时回调函数 | () => void | | | onEntered | 进入后回调函数 | () => void | | | onExited | 退出后回调函数 | () => void | | | children | 关联子组件 | RaxNode | |

Transition.View

|名称 | 说明 | 类型 | 默认值 | |:---------------|:--------|:----|:----------| | properties | 过渡属性 | Array | [] | | delay | 延迟时间 | number | 0 | | duration | 动画持续时间 | number | | | timingFunction | 动画函数 | 'linear' / 'ease' / 'ease-in' / 'ease-out' / 'ease-in-out' / 'cubic-bezier(x1, y1, x2, y2)' | 'ease' | | onTransitionEnd | 动画结束后回调函数 | () => void | | | transitionKey | 与 Transition 组件配置使用时，在小程序端必选，与 Transition 组件的该属性值一致 | string | |

TransitionType

|名称 | 说明 | 类型 | 默认值 | |:---------------|:--------|:----|:----------| | properties | 过渡属性 | Array | [] | | delay | 延迟时间 | number | 0 | | duration | 动画持续时间 | number | | | timingFunction | 动画函数 | 'linear' / 'ease' / 'ease-in' / 'ease-out' / 'ease-in-out' / 'cubic-bezier(x1, y1, x2, y2)' | 'ease' |