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