ant-design/components/enter-animation/index.md

EnterAnimation

• order: 11
• category: Components
• chinese: 进场动画
• cols: 1

---

页面进场离场的动画。

何时使用

1.从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。

2.小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，使页面转场更加流畅和舒适，提高整体视觉效果和产品的质感。

API

动画默认right

EnterAnimation标签下：

参数	类型	默认值	详细
type	string	right	执行动画的内置参数
style	string	null	同上，style的样式动画,type有值，此项无效
delay	number	0	整个区块的延时，以秒为单位
interval	number	0.1	递增延时值，以秒为单位

dom子标签下：

参数	类型	默认值	详细
enter-data	object	right	子标签动画参数

enter-data参数列表

参数	类型	默认值	详细
type	string	right	内置动画样式： alpha left right top bottom scale scaleFrom scaleX scaleY;
style	string	null	style样式，如transform: translateX(100px),每个样式必须以;结束；type有值此项无效
direction	string	"enter"	动画进场或出场样式,以 enter leave两值;默认为 enter
duration	number	0.5	动画的时间,以秒为单位
ease	string	cubic-bezier(0.165, 0.84, 0.44, 1)	样式缓动，只支持css样式缓动
delay	number	0	动画的延时，依照结构递增以上的interval
queueId	number	0	动画的线程

注：如子节点有 enter-data 值，则只执行有 enter-data 的节点的动画，相反所有子节点上都没有 enter-data 值，则执行遍历dom下一级节点来执行动画。

如果标签上的 enter-data 没 type || style ，则执行 EnterAnimation 标签上的 type || style。