Animate 动画

开发指南

何时使用

需要自定义动效

Next Animate

基本

展示单个子元素的进场离场动画。

hello
world
click
me

多个子元素动画

展示多个子元素的进场离场动画。

通知

展开收起动画

展示单个子元素的展开收起动画。

API

Animate

参数说明类型默认值
animation动画 classNameString/Object-
animationAppear子元素第一次挂载时是否执行动画Booleantrue
component包裹子元素的标签any'div'
singleMode是否只有单个子元素,如果有多个子元素,请设置为 falseBooleantrue
children子元素ReactElement/Array<ReactElement>-
beforeAppear执行第一次挂载动画前触发的回调函数

签名:
Function() => void
Function() => {}
onAppear执行第一次挂载动画,添加 xxx-appear-active 类名后触发的回调函数

签名:
Function(node: HTMLElement) => void
参数:
node: {HTMLElement} 执行动画的 dom 元素
Function() => {}
afterAppear执行完第一次挂载动画后触发的函数

签名:
Function(node: HTMLElement) => void
参数:
node: {HTMLElement} 执行动画的 dom 元素
Function() => {}
beforeEnter执行进场动画前触发的回调函数

签名:
Function(node: HTMLElement) => void
参数:
node: {HTMLElement} 执行动画的 dom 元素
Function() => {}
onEnter执行进场动画,添加 xxx-enter-active 类名后触发的回调函数

签名:
Function(node: HTMLElement) => void
参数:
node: {HTMLElement} 执行动画的 dom 元素
Function() => {}
afterEnter执行完进场动画后触发的回调函数

签名:
Function(node: HTMLElement) => void
参数:
node: {HTMLElement} 执行动画的 dom 元素
Function() => {}
beforeLeave执行离场动画前触发的回调函数

签名:
Function(node: HTMLElement) => void
参数:
node: {HTMLElement} 执行动画的 dom 元素
Function() => {}
onLeave执行离场动画,添加 xxx-leave-active 类名后触发的回调函数

签名:
Function(node: HTMLElement) => void
参数:
node: {HTMLElement} 执行动画的 dom 元素
Function() => {}
afterLeave执行完离场动画后触发的回调函数

签名:
Function(node: HTMLElement) => void
参数:
node: {HTMLElement} 执行动画的 dom 元素
Function() => {}

Animation List

InOut
fadeInfadeOut
fadeInDownfadeOutDown
fadeInLeftfadeOutLeft
fadeInRightfadeOutRight
fadeInUpfadeOutUp
zoomInzoomOut
expandInDownexpandOutUp
expandInUpexpandOutDown
pulse