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

EnterAnimation

• 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>

router使用方法:

<EnterAnimation enter={type:'left'} leave={type:'right'}>
  {cloneElement(this.props.children || <div/>, {key: 'demo1'})}
  //或者直接标签
  <div key='demo2'>
    <div>依次进场</div>
    <div>依次进场</div>
  </div>
</EnterAnimation>

API

参数	类型	默认值	详细
enter	object	right	管理进场数据
leave	object	null	管理当前元素出场的数据,null时继承enter里的所有标签的值
component	string	div	EnterAnimation替换的标签名

enter = {} | leave =

参数	类型	默认值	详细
type	string	right	执行动画的内置参数
eStyle	string	null	同上， style 的样式动画, type 有值，此项无效
duration	number	0.5	每个动画的时间
ease	string	cubic-bezier(0.165, 0.84, 0.44, 1);	样式缓动,只支持 css 样式缓动;
delay	number	0	整个区块的延时，以秒为单位
upend	boolean	false	是否倒放,从最后一个dom开始往上播放
interval	number	0.1	递增延时值，以秒为单位
callback	function	null	动画结束回调

一级标签key：

参数	类型	详细
key	string	必需，控制进出场；

enter-data | data-enter

参数	类型	默认值	详细
enter-data	object	right	子标签进场参数
data-enter	JSON String	null	router下enter-data无效，新增dom标签，router时createClass页面里可用;
leave-data	object	enter-data	子标签出场参数
data-leave	JSON String	null	同 data-enter

enter-data = {} | data-enter='{"type":"right"}' | leave-data={} | data-leave='{"type":"right"}'

参数	类型	默认值	详细
type	string	right	内置动画样式： alpha left right top bottom scale scaleBig scaleX scaleY
style	string	null	动画样式，如 transform: translateX(100px)，type 有值此项无效
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 及更早的版本将没有进场效果。