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	执行动画的内置参数
eStyle	string	null	同上， style 的样式动画, type 有值，此项无效
direction	string	enter	动画进场或出场样式,以 enter leave 两值
duration	number	0.5	每个动画的时间
ease	string	cubic-bezier(0.165, 0.84, 0.44, 1);	样式缓动;
delay	number	0	整个区块的延时，以秒为单位
upend	boolean	false	是否倒放,从最后一个dom开始往上播放
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 及更早的版本将没有进场效果。