mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
6.9 KiB
6.9 KiB
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); |
样式缓动,只支持 css 样式缓动; |
delay | number | 0 | 整个区块的延时,以秒为单位 |
upend | boolean | false | 是否倒放,从最后一个dom开始往上播放 |
interval | number | 0.1 | 递增延时值,以秒为单位 |
callback | function | null | 动画结束回调 |
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
及更早的版本将没有进场效果。