@doraemon-ui/miniprogram.animation-group NPM

AnimationGroup 动画组

将自定义的组件包裹在 animation-group 组件内，可以实现过渡/动画效果，预设 9 种过渡效果 fadeIn, fadeInDown, fadeInLeft, fadeInRight, fadeInUp, slideInUp, slideInDown, slideInLeft, slideInRight, zoom, punch 可选用。

在进入/离开的过渡中，会有 6 个 class 切换：

-enter: 进入过渡的开始状态，在过渡过程完成之后移除
-enter-active: 进入过渡的结束状态，在过渡过程完成之后移除
-enter-done: 进入过渡的完成状态
-exit: 离开过渡的开始状态，在过渡过程完成之后移除
-exit-active: 离开过渡的结束状态，在过渡过程完成之后移除
-exit-done: 离开过渡的完成状态

使用指南

JAVASCRIPT

WXSS

wxss

API

AnimationGroup props

参数	类型	描述	默认值
in	`boolean`	触发组件进入或离开过渡的状态	false
classNames	`any`	过渡的类名	-
duration	`any`	过渡持续时间	-
type	`string`	过渡动效的类型	transition
appear	`boolean`	首次挂载时是否触发进入过渡	false
enter	`boolean`	是否启用进入过渡	true
exit	`boolean`	是否启用离开过渡	true
mountOnEnter	`boolean`	首次进入过渡时是否懒挂载组件	true
unmountOnExit	`boolean`	离开过渡完成时是否卸载组件	true
wrapCls	`string`	自定义类名	-
wrapStyle	`string,object`	自定义样式	-
disableScroll	`boolean`	阻止移动触摸	false
bind:click	`function`	点击组件时触发的回调函数	-
bind:enter	`function`	进入过渡的开始状态时触发的回调函数	-
bind:entering	`function`	进入过渡的结束状态时触发的回调函数	-
bind:entered	`function`	进入过渡的完成状态时触发的回调函数	-
bind:exit	`function`	离开过渡的开始状态时触发的回调函数	-
bind:exiting	`function`	离开过渡的结束状态时触发的回调函数	-
bind:exited	`function`	离开过渡的完成状态时触发的回调函数	-
bind:change	`function`	监听状态变化的回调函数	-