@doraemon-ui/miniprogram.animation-group

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: 离开过渡的完成状态

使用指南

在 page.json 中引入组件

json

示例代码

在开发者工具中预览效果

WXML

wxml

JAVASCRIPT

js

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	监听状态变化的回调函数	-

AnimationGroup slot

名称	描述
-	自定义内容

AnimationGroup externalClasses

名称	描述
dora-class	根节点样式类