mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-06 02:15:35 +08:00
2.4 KiB
2.4 KiB
category | chinese | type | english |
---|---|---|---|
Components | 进出场动画 | 其它 | QueueAnim |
通过简单的配置对一组元素添加串行的进场动画效果。
何时使用
-
从内容A到内容B的转变过程时能有效的吸引用户注意力,突出视觉中心,提高整体视觉效果。
-
小的信息元素排布或块状较多的情况下,根据一定的路径层次依次进场,区分维度层级,来凸显量级,使页面转场更加流畅和舒适,提高整体视觉效果和产品的质感。
-
特别适合首页和需要视觉展示效果的宣传页,以及单页应用的切换页面动效。
API
此组件
antd@1.0.0+
后标记为废弃,您可以直接使用import QueueAnim from 'rc-queue-anim'
来代替。文档后续会移到 ant-motioin。
ant-motioin 是一个动效设计语言,欢迎关注。
元素依次进场。
<QueueAnim>
<div key='demo1'>依次进场</div>
<div key='demo2'>依次进场</div>
<div key='demo3'>依次进场</div>
<div key='demo4'>依次进场</div>
</QueueAnim>
每个子标签必须带 key,如果未设置 key 将不执行动画。
参数 | 类型 | 默认 | 详细 |
---|---|---|---|
type | string / array | right |
动画内置参数 left right top bottom scale scaleBig scaleX scaleY |
animConfig | object / array | null | 配置动画参数 如 {opacity:[1, 0],translateY:[0, -30]} 具体参考 velocity 的写法 |
delay | number / array | 0 | 整个动画的延时,以毫秒为单位 |
duration | number / array | 500 | 每个动画的时间,以毫秒为单位 |
interval | number / array | 100 | 每个动画的间隔时间,以毫秒为单位 |
leaveReverse | boolean | false | 出场时是否倒放,从最后一个 dom 开始往上播放 |
ease | string / array | easeOutQuart |
动画的缓动函数,查看详细 |
animatingClassName | array | ['queue-anim-entering', 'queue-anim-leaving'] |
进出场动画进行中的类名 |
component | string | div |
QueueAnim 替换的标签名 |
当以上数据类型为 Array 时,
['left', 'top']
第一个为进场动画属性, 第二个为离场属性。