@rax-ui/transition NPM | npm.io

1.0.0-beta.62 • Published 3 years ago

Install

Weekly downloads

36

License

-

Repository

Last release

3 years ago

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'

Rax rax-component

@rax-ui/styles rax-children rax-clone-element rax-find-dom-node rax-text rax-view universal-env universal-transition

@infinitebrahmanuniverse/nolb-_rax @everything-registry/sub-chunk-760 @rax-ui/dialog @rax-ui/drawer @rax-ui/toast @rax-ui/radio @rax-ui/switch @rax-ui/tabs @rax-ui/modal @zalastax/nolb-_rax

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago