You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ant-design/components/enter-animation/index.md

2.7 KiB

EnterAnimation

  • order: 11
  • category: Components
  • chinese: 进场动画
  • cols: 1

页面进场离场的动画。

何时使用

1.从内容A到内容B的转变过程时能有效的吸引用户注意力突出视觉中心提高整体视觉效果。

2.小的信息元素排布或块状较多的情况下,根据一定的路径层次依次进场,区分维度层级,来凸显量级,使页面转场更加流畅和舒适,提高整体视觉效果和产品的质感。

API

动画默认right

EnterAnimation标签下

参数 类型 默认值 详细
type string right 执行动画的内置参数;
style string null 同上style的样式动画,type有值,此项无效;
delay number 0 整个区块的延时;以秒为单位
interval number 0.1 递增延时值;以秒为单位

dom子标签下

参数 类型 默认值 详细
enter-data object right 子标签动画参数

enter-data参数列表

参数 类型 默认值 详细
type string right 内置动画样式:
left right top bottom scale scaleFrom scaleX scaleY;
style string null style样式如transform: translateX(100px),每个样式必须以;结束;type有值此项无效
direction string "enter" 动画进场或出场样式,以enter leave两值;默认为enter,
duration number 0.5 动画的时间,以秒为单位;
ease string cubic-bezier(0.165, 0.84, 0.44, 1); 样式缓动只支持css样式缓动;
delay number 0 动画的延时;默认0,依照结构递增以上的interval
queueId number 0 动画的线程

注:如子节点有enter-data值,则只执行有enter-data的节点的动画,相反所有子节点上都没有enter-data则执行遍历dom下一级节点来执行动画;

如果标签上的enter-datatype||style,则执行EnterAnimation标签上的type||style;