ant-design/components/motion/index.md

Motion

• category: CSS
• chinese: 组件动画
• order: 4
• cols: 1

---

组件的动画

通过设置组件的 transitionName 指定组件动画。

组件	中文名	采用动画
popover	气泡浮出层	zoom-up zoom-down zoom-left zoom-right
popconfirm	气泡确认框	zoom-up zoom-down zoom-left zoom-right
tooltip	文字提示框	zoom-up zoom-down zoom-left zoom-right
modal	弹出框	zoom
confirm	弹出确认框	zoom
message	信息提示条	move-up
dropdown	下拉菜单	slide-up
select	选择框	slide-up
datepicker	日期选择框	slide-up

缓动函数

在以上组件的动画不适合时，请用以下缓动。

名称	参数	说明与适用
@ease-out	cubic-bezier(0.215, 0.61, 0.355, 1);	默认后缓动；适合元素展开时；
@ease-in	cubic-bezier(0.55, 0.055, 0.675, 0.19);	默认前缓动；适合元素关闭时；
@ease-in-out	cubic-bezier(0.645, 0.045, 0.355, 1);	默认前后缓动；适合元素移动；
@ease-out-back	cubic-bezier(0.18, 0.89, 0.32, 1.28);	结束回动；适合弹出框出现时；
@ease-in-back	cubic-bezier(0.6, -0.3, 0.74, 0.05);	开始回动；适合弹出框关闭；
@ease-in-out-back	cubic-bezier(0.68, -0.55, 0.27, 1.55);	前后回动；
@ease-out-circ	cubic-bezier(0.08, 0.82, 0.17, 1);	圆形后缓动；适合元素展开时；
@ease-in-circ	cubic-bezier(0.6, 0.04, 0.98, 0.34);	圆形前缓动；适合元素关闭时；
@ease-in-out-circ	cubic-bezier(0.78, 0.14, 0.15, 0.86);	圆形缓动；适合元素移动；