You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

51 lines
2.4 KiB

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