ant-design/components/queue-anim/index.md
2016-04-29 21:50:50 +08:00

2.4 KiB
Raw Blame History

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'] 第一个为进场动画属性, 第二个为离场属性。