From 7d0b668801f24402588784b326c0c04e126e464d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BD=97=E5=AE=AA?= Date: Mon, 13 Jul 2015 15:48:24 +0800 Subject: [PATCH] update motion add ease --- components/motion/index.md | 15 ++++++++++++++- style/core/motion/zoom.less | 1 - 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/components/motion/index.md b/components/motion/index.md index c33532f548..a7aba0397f 100644 --- a/components/motion/index.md +++ b/components/motion/index.md @@ -6,7 +6,6 @@ --- - ## 组件的动画 通过设置组件的 transitionName 指定组件动画 @@ -23,3 +22,17 @@ | 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); |圆形缓动；适合元素移动； | \ No newline at end of file diff --git a/style/core/motion/zoom.less b/style/core/motion/zoom.less index e362da93bd..9c2fd18b3e 100644 --- a/style/core/motion/zoom.less +++ b/style/core/motion/zoom.less @@ -6,7 +6,6 @@ } .@{className}-leave { animation-timing-function: @ease-in-circ; - transform: scale(0, 0); } }