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

EnterAnimation

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

---

通过简单的配置对一组元素添加串行的进场动画效果。

何时使用

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

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

如何使用

一级子元素依次进场。

<EnterAnimation>
  <div>依次进场</div>
  <div>依次进场</div>
  <div>依次进场</div>
  <div>依次进场</div>
</EnterAnimation>

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

<EnterAnimation type="left" delay={2}>
  <div>
    <div enter-data>
      依次进场
    </div>
  </div>
  <div enter-data>依次进场</div>
  <div enter-data={{type: 'bottom'}}>依次进场，并修改动画效果</div>
  <div>没有动画</div>
</EnterAnimation>

API

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

enter-data

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

enter-data=

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

由于使用了 CSS3 动画，所以 IE9 及更早的版本将没有进场效果。