merge

components/datepicker/demo/basic.md

@@ -7,6 +7,7 @@
 ---
 
 ````jsx
+// or require('antd/components/datepicker');
 var Datepicker = antd.Datepicker;
 
 React.render(

components/datepicker/demo/transitionName.md

@@ -0,0 +1,17 @@
+# 基本
+
+- order: 0
+
+启用动画。
+
+---
+
+````jsx
+var Datepicker = antd.Datepicker;
+
+React.render(
+  <Datepicker
+  transitionName="slide-up"
+  value="" />
+, document.getElementById('components-datepicker-demo-transitionname'));
+````

components/datepicker/index.jsx

@@ -21,11 +21,10 @@ defaultCalendarValue.setTime(Date.now());
 
 export default React.createClass({
   getInitialState() {
-    var value = new GregorianCalendar(zhCn);
+    var value;
     if (this.props.value) {
+      value = new GregorianCalendar(zhCn);
       value.setTime(new Date(this.props.value).valueOf());
-    } else {
-      value = '';
     }
     return {
       value: value
@@ -68,6 +67,7 @@ export default React.createClass({
     );
     return (
       <Datepicker
+        transitionName={this.props.transitionName}
         trigger={<span className="ant-calendar-picker-icon" />}
         calendar={calendar}
         formatter={new DateTimeFormat(this.props.format)}

components/datepicker/index.md

@@ -23,6 +23,7 @@
 | value    | 日期           | string   | 无           |
 | format   | 展示的日期格式 | string   | "yyyy-MM-dd" |
 | disabled | 不可选择的日期 | function | 无           |
+| transitionName | 动画名称 | String.可取 'slide-up' | 无.            |
 | onSelect | 选择日期的回调 | function | 无           |
 | showTime | 显示时间选择条 | boolean  | false        |
 

components/input-number/demo/basic.md

@@ -0,0 +1,20 @@
+# 基本
+
+- order: 0
+
+数字输入框
+
+---
+
+````jsx
+var InputNumber = antd.InputNumber;
+
+function onChange(v){
+  console.log('changed',v);
+}
+
+React.render(
+  <div><InputNumber min={1} max={10} defaultValue={3} onChange={onChange} style={{width:100}}/></div>
+, document.getElementById('components-input-number-demo-basic'));
+````
+

components/input-number/index.jsx

@@ -0,0 +1,15 @@
+var InputNumber = require('rc-input-number');
+var React = require('react');
+
+var AntInputNumber = React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'ant-input-number'
+    };
+  },
+  render() {
+    return <InputNumber {...this.props}/>;
+  }
+});
+
+module.exports = AntInputNumber;

components/input-number/index.md

@@ -0,0 +1,27 @@
+# InputNumber
+
+- category: Components
+- chinese: 数字输入框
+
+---
+
+通过鼠标或键盘，输入范围内的数值。
+
+## 何时使用
+
+- 当需要获取标准数值时。
+
+## API
+
+属性如下
+
+| 成员        | 说明           | 类型               | 默认值       |
+|-------------|----------------|--------------------|--------------|
+| min     | 最小值   | Number | -Infinity        |
+| max     | 最大值       | Number      | Infinity           |
+| value     | 当前值       | Number      |            |
+| step     | 每次改变步数       | Number      |      1      |
+| defaultValue     | 初始值       | Number      |            |
+| onChange     | 变化回调       | Function      |            |
+| disabled     | 禁用       | Boolean      |            |
+| style     | 根节点样式       | Object      |

components/inputNumber/index.md

@@ -1,12 +0,0 @@
-# InputNumber
-
-- category: Components
-- chinese: 数字输入框
-
----
-
-通过鼠标或键盘，输入范围内的数值。
-
-## 何时使用
-
-- 当需要获取标准数值时。

components/motion/demo/basic.md

@@ -0,0 +1,226 @@
+# 基本
+
+- order: 0
+
+动画效果示例。
+
+---
+
+````jsx
+var cssAnimation = antd.cssAnimation;
+var motions = [];
+motions = motions.concat([[{
+  name: '淡入',
+  value: 'fade',
+  direction: 'enter',
+  type: '渐隐'
+}, {
+  name: '淡出',
+  value: 'fade',
+  direction: 'leave',
+  type: '渐隐'
+}]]);
+motions = motions.concat([[{
+  name: '中心放大',
+  value: 'zoom',
+  direction: 'enter',
+  type: '缩放'
+}, {
+  name: '中心缩小',
+  value: 'zoom',
+  direction: 'leave',
+  type: '缩放'
+}, {
+  name: '上方放大',
+  value: 'zoom-up',
+  direction: 'enter',
+  type: '缩放'
+}, {
+  name: '上方缩小',
+  value: 'zoom-up',
+  direction: 'leave',
+  type: '缩放'
+}, {
+  name: '下方放大',
+  value: 'zoom-down',
+  direction: 'enter',
+  type: '缩放'
+}, {
+  name: '下方缩小',
+  value: 'zoom-down',
+  direction: 'leave',
+  type: '缩放'
+}, {
+  name: '左方放大',
+  value: 'zoom-left',
+  direction: 'enter',
+  type: '缩放'
+}, {
+  name: '左方缩小',
+  value: 'zoom-left',
+  direction: 'leave',
+  type: '缩放'
+}, {
+  name: '右方放大',
+  value: 'zoom-right',
+  direction: 'enter',
+  type: '缩放'
+}, {
+  name: '右方缩小',
+  value: 'zoom-right',
+  direction: 'leave',
+  type: '缩放'
+}]]);
+motions = motions.concat([[{
+  name: '上方滑入',
+  value: 'move-up',
+  direction: 'enter',
+  type: '移动'
+}, {
+  name: '上方滑出',
+  value: 'move-up',
+  direction: 'leave',
+  type: '移动'
+}, {
+  name: '下方滑入',
+  value: 'move-down',
+  direction: 'enter',
+  type: '移动'
+}, {
+  name: '下方滑出',
+  value: 'move-down',
+  direction: 'leave',
+  type: '移动'
+}, {
+  name: '左方滑入',
+  value: 'move-left',
+  direction: 'enter',
+  type: '移动'
+}, {
+  name: '左方滑出',
+  value: 'move-left',
+  direction: 'leave',
+  type: '移动'
+}, {
+  name: '右方滑入',
+  value: 'move-right',
+  direction: 'enter',
+  type: '移动'
+}, {
+  name: '右方滑入',
+  value: 'move-right',
+  direction: 'leave',
+  type: '移动'
+}]]);
+motions = motions.concat([[{
+  name: '上方展开',
+  value: 'slide-up',
+  direction: 'enter',
+  type: '伸缩'
+}, {
+  name: '上方缩回',
+  value: 'slide-up',
+  direction: 'leave',
+  type: '伸缩'
+}, {
+  name: '下方展开',
+  value: 'slide-down',
+  direction: 'enter',
+  type: '伸缩'
+}, {
+  name: '下方缩回',
+  value: 'slide-down',
+  direction: 'leave',
+  type: '伸缩'
+}, {
+  name: '左方展开',
+  value: 'slide-left',
+  direction: 'enter',
+  type: '伸缩'
+}, {
+  name: '左方缩回',
+  value: 'slide-left',
+  direction: 'leave',
+  type: '伸缩'
+}, {
+  name: '右方展开',
+  value: 'slide-right',
+  direction: 'enter',
+  type: '伸缩'
+}, {
+  name: '右方缩回',
+  value: 'slide-right',
+  direction: 'leave',
+  type: '伸缩'
+}]]);
+motions = motions.concat([[{
+  name: '摇摆',
+  value: 'swing',
+  direction: 'enter',
+  type: '其他'
+}]]);
+var leave='-leave';
+var Test = React.createClass({
+  handleChange(e) {
+    var value = e.target.value;
+    if(value){
+      this.demoNode.style.visibility='';
+      cssAnimation(this.demoNode, value, () => {
+        if(value.slice(-leave.length)===leave){
+          this.demoNode.style.visibility='hidden';
+        }
+      });
+    }
+  },
+
+  componentDidMount() {
+    this.demoNode = React.findDOMNode(this.refs.demo);
+  },
+
+  render() {
+    var options = [<option value="">请选择预设动画</option>].concat(motions.map(function (m) {
+      var opts = m.map(function (m2) {
+        return <option value={m2.value + "-" + m2.direction}>{m2.name + " " + m2.value}</option>
+      });
+      return <optgroup label={m[0].type}>{opts}</optgroup>;
+    }));
+    return <div>
+      <div className="motion-container">
+        <div ref="demo" className="motion-example">栗子</div>
+      </div>
+      <div className="motion-select">
+        <select onChange={this.handleChange}>{options}</select>
+      </div>
+    </div>;
+  }
+});
+
+React.render(<Test/>, document.getElementById('components-motion-demo-basic'));
+````
+
+<style>
+.motion-container {
+  height: 150px;
+  line-height: 150px;
+  text-align: center;
+  margin-bottom: 20px;
+}
+.motion-example {
+  background: #4AAFDE;
+  width: 140px;
+  height: 140px;
+  line-height: 140px;
+  font-size: 18px;
+  color: #fff;
+  text-align: center;
+  display: inline-block !important;
+  border-radius: 8px;
+  font-weight: bold;
+}
+.motion-select {
+  text-align: center;
+}
+.code-boxes-col-2-1 {
+  width:100%;
+}
+</style>

components/motion/index.md

@@ -6,3 +6,20 @@
 
 ---
 
+
+## 组件的动画
+
+通过设置组件的 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`                                      |
+

index.js

@@ -13,7 +13,9 @@ var antd = {
   Breadcrumb: require('./components/breadcrumb'),
   Popconfirm: require('./components/popconfirm'),
   confirm: require('./components/modal/confirm'),
-  Steps: require('./components/steps')
+  Steps: require('./components/steps'),
+  InputNumber: require('./components/input-number'),
+  cssAnimation: require('css-animation')
 };
 
 module.exports = window.antd = antd;

package.json

@@ -12,11 +12,13 @@
     "url": "https://github.com/ant-design/ant-design/issues"
   },
   "dependencies": {
+    "css-animation": "~1.0.3",
     "gregorian-calendar": "~3.0.0",
     "gregorian-calendar-format": "~3.0.1",
-    "rc-calendar": "~3.9.0",
+    "rc-calendar": "~3.10.0",
     "rc-dialog": "~4.3.5",
     "rc-dropdown": "~1.1.1",
+    "rc-input-number": "~2.0.0",
     "rc-menu": "~3.4.0",
     "rc-progress": "~1.0.0",
     "rc-select": "~4.0.0",

site/templates/layout.html

@@ -13,7 +13,7 @@
     {% block styles %}{% endblock %}
     <link rel="stylesheet" href="/static/style.css">
     <link rel="stylesheet" href="/static/tomorrow.css">
-    <script src="https://a.alipayobjects.com/??jquery/jquery/1.11.1/jquery.js,es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.min.js,bluebird/2.9.30/bluebird.js"></script>
+    <script src="https://a.alipayobjects.com/??jquery/jquery/1.11.1/jquery.js,es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.js,bluebird/2.9.30/bluebird.js"></script>
     <script src="/static/script.js"></script>
     {% block scripts %}{% endblock %}
 </head>

style/components/index.less

@@ -13,3 +13,4 @@
 @import "progress";
 @import "steps";
 @import "breadcrumb";
+@import "inputNumber";

style/components/inputNumber.less

@@ -0,0 +1,115 @@
+@inputNumberPrefixCls: ant-input-number;
+
+@import "../mixins/iconfont";
+
+.@{inputNumberPrefixCls} {
+  margin: 0;
+  padding: 0;
+  line-height: 26px;
+  font-size: 12px;
+  height: 26px;
+  display: inline-block;
+  vertical-align: middle;
+  border: 1px solid #D9D9D9;
+  border-radius: 5px;
+
+  &-handler {
+    text-align: center;
+    line-height: 12px;
+    height: 12px;
+    overflow: hidden;
+  }
+
+  &-handler-up-inner, &-handler-down-inner {
+    color: #666666;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  &:hover {
+    border-color: #23c0fa;
+
+    .@{inputNumberPrefixCls}-handler-up, .@{inputNumberPrefixCls}-handler-wrap {
+      border-color: #23c0fa;
+    }
+  }
+
+  &-disabled:hover {
+    border-color: #d9d9d9;
+
+    .@{inputNumberPrefixCls}-handler-up, .@{inputNumberPrefixCls}-handler-wrap {
+      border-color: #d9d9d9;
+    }
+  }
+
+  &-input-wrap {
+    overflow: hidden;
+    height: 26px;
+  }
+
+  &-input {
+    width: 100%;
+    text-align: center;
+    outline: 0;
+    -moz-appearance: textfield;
+    line-height: 26px;
+    height: 24px;
+    transition: all 0.3s ease;
+    color: #666666;
+    border: 0;
+    border-radius: 5px;
+    padding: 0;
+  }
+
+  &-handler-wrap {
+    float: right;
+    border-left: 1px solid #D9D9D9;
+    width: 20px;
+    height: 26px;
+  }
+
+  &-handler-up {
+    border-bottom: 1px solid #D9D9D9;
+    &-inner {
+      .iconfont-mixin();
+      top:-2px;
+      &:before {
+        content: "\e611";
+        transform: rotate(270deg) scale(0.8);
+      }
+    }
+  }
+
+  &-handler-down {
+    &-inner {
+      .iconfont-mixin();
+      &:before {
+        content: "\e611";
+        transform: rotate(90deg) scale(0.8);
+      }
+    }
+  }
+
+  .handler-disabled() {
+    opacity: 0.72;
+    &:hover {
+      color: #999;
+      border-color: #d9d9d9;
+    }
+  }
+
+  &-handler-down-disabled, &-handler-up-disabled {
+    .handler-disabled();
+  }
+
+  &-disabled {
+    .@{inputNumberPrefixCls}-input {
+      opacity: 0.72;
+      cursor: not-allowed;
+      background-color: #f3f3f3;
+    }
+    .@{inputNumberPrefixCls}-handler {
+      .handler-disabled();
+    }
+  }
+}

style/core/iconfont.less

@@ -1,3 +1,5 @@
+@import "../mixins/iconfont";
+
 // font-face
 // @icon-url： 字体源文件的地址
 @font-face {
@@ -10,22 +12,7 @@
 }
 
 .@{iconfont-css-prefix} {
-  position: relative;
-  display: inline-block;
-  font-style: normal;
-  vertical-align: baseline;
-  text-align: center;
-  text-transform: none;
-  text-rendering: auto;
-  // 更好地渲染字体
-  -webkit-font-smoothing: antialiased;
-  -webkit-text-stroke-width: 0px;
-  -moz-osx-font-smoothing: grayscale;
-
-  &:before {
-    display: block;
-    font-family: "anticon" !important;
-  }
+ .iconfont-mixin();
 }
 // 方向性图标
 .@{iconfont-css-prefix}-step-backward:before          {content:"\e662";}

style/core/motion.less

@@ -1,19 +1,16 @@
-.effect() {
-  animation-duration: 0.24s;
+.motion-common() {
+  animation-duration: .24s;
   animation-fill-mode: both;
   display: block !important;
 }
 
-.motion(@className, @keyframeName) {
+.make-motion(@className, @keyframeName) {
   .@{className}-enter {
-    opacity: 0;
-    .effect();
-    animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+    .motion-common();
     animation-play-state: paused;
   }
   .@{className}-leave {
-    .effect();
-    animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
+    .motion-common();
     animation-play-state: paused;
   }
   .@{className}-enter.@{className}-enter-active {
@@ -26,240 +23,9 @@
   }
 }
 
-.motion(zoom,zoom);
-.motion(zoom-up,zoomUp);
-.motion(zoom-down,zoomDown);
-.motion(zoom-left,zoomLeft);
-.motion(zoom-right,zoomRight);
-
-@keyframes zoomIn {
-  0% {
-    opacity: 0;
-    transform-origin: 50% 50%;
-    transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 50% 50%;
-    transform: scale(1, 1);
-  }
-}
-@keyframes zoomOut {
-  0% {
-    opacity: 1;
-    transform-origin: 50% 50%;
-    transform: scale(1, 1);
-  }
-  100% {
-    opacity: 0;
-    transform-origin: 50% 50%;
-    transform: scale(0, 0);
-  }
-}
-
-@keyframes zoomUpIn {
-  0% {
-    opacity: 0;
-    transform-origin: 50% 0%;
-    transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 50% 0%;
-    transform: scale(1, 1);
-  }
-}
-
-@keyframes zoomUpOut {
-  0% {
-    opacity: 1;
-    transform-origin: 50% 0%;
-    transform: scale(1, 1);
-  }
-  100% {
-    opacity: 0;
-    transform-origin: 50% 0%;
-    transform: scale(0, 0);
-  }
-}
-
-@keyframes zoomLeftIn {
-  0% {
-    opacity: 0;
-    transform-origin: 0% 50%;
-    transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 0% 50%;
-    transform: scale(1, 1);
-  }
-}
-
-@keyframes zoomLeftOut {
-  0% {
-    opacity: 1;
-    transform-origin: 0% 50%;
-    transform: scale(1, 1);
-  }
-  100% {
-    opacity: 0;
-    transform-origin: 0% 50%;
-    transform: scale(0, 0);
-  }
-}
-
-@keyframes zoomRightIn {
-  0% {
-    opacity: 0;
-    transform-origin: 100% 50%;
-    transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 100% 50%;
-    transform: scale(1, 1);
-  }
-}
-
-@keyframes zoomRightOut {
-  0% {
-    opacity: 1;
-    transform-origin: 100% 50%;
-    transform: scale(1, 1);
-  }
-  100% {
-    opacity: 0;
-    transform-origin: 100% 50%;
-    transform: scale(0, 0);
-  }
-}
-
-@keyframes zoomDownIn {
-  0% {
-    opacity: 0;
-    transform-origin: 50% 100%;
-    transform: scale(0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 50% 100%;
-    transform: scale(1, 1);
-  }
-}
-
-@keyframes zoomDownOut {
-  0% {
-    opacity: 1;
-    transform-origin: 50% 100%;
-    transform: scale(1, 1);
-  }
-  100% {
-    opacity: 0;
-    transform-origin: 50% 100%;
-    transform: scale(0, 0);
-  }
-}
-
-.slide-up-enter {
-  .effect();
-  transform-origin: 0 0;
-  opacity: 0;
-  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
-  animation-play-state: paused;
-}
-
-.slide-up-leave {
-  .effect();
-  transform-origin: 0 0;
-  opacity: 1;
-  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
-  animation-play-state: paused;
-}
-
-.slide-up-enter.slide-up-enter-active {
-  animation-name: slideUpIn;
-  animation-play-state: running;
-}
-
-.slide-up-leave.slide-up-leave-active {
-  animation-name: slideUpOut;
-  animation-play-state: running;
-}
-
-@keyframes slideUpIn {
-  0% {
-    opacity: 0;
-    transform-origin: 0% 0%;
-    transform: scaleY(0);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 0% 0%;
-    transform: scaleY(1);
-  }
-}
-@keyframes slideUpOut {
-  0% {
-    opacity: 1;
-    transform-origin: 0% 0%;
-    transform: scaleY(1);
-  }
-  100% {
-    opacity: 0;
-    transform-origin: 0% 0%;
-    transform: scaleY(0);
-  }
-}
-
-.fade-enter {
-  opacity: 0;
-  .effect();
-  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
-  animation-play-state: paused;
-}
-
-.fade-leave {
-  .effect();
-  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
-  animation-play-state: paused;
-}
-
-.fade-enter.fade-enter-active {
-  animation-name: fadeIn;
-  animation-play-state: running;
-}
-
-.fade-leave.fade-leave-active {
-  animation-name: fadeOut;
-  animation-play-state: running;
-}
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeOut {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes loadingCircle {
-  0% {
-    transform-origin: 50% 50%;
-    transform: rotate(0deg);
-  }
-  100% {
-    transform-origin: 50% 50%;
-    transform: rotate(360deg);
-  }
-}
+@import "motion/fade";
+@import "motion/move";
+@import "motion/other";
+@import "motion/slide";
+@import "motion/swing";
+@import "motion/zoom";

style/core/motion/fade.less

@@ -0,0 +1,40 @@
+.fade-enter {
+  opacity: 0;
+  .motion-common();
+  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
+  animation-play-state: paused;
+}
+
+.fade-leave {
+  .motion-common();
+  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
+  animation-play-state: paused;
+}
+
+.fade-enter.fade-enter-active {
+  animation-name: fadeIn;
+  animation-play-state: running;
+}
+
+.fade-leave.fade-leave-active {
+  animation-name: fadeOut;
+  animation-play-state: running;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

style/core/motion/move.less

@@ -0,0 +1,119 @@
+.move-motion(@className, @keyframeName) {
+  .make-motion(@className, @keyframeName);
+  .@{className}-enter {
+    opacity: 0;
+    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+  }
+  .@{className}-leave {
+    animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+  }
+}
+
+.move-motion(move-up, moveUp);
+.move-motion(move-down, moveDown);
+.move-motion(move-left, moveLeft);
+.move-motion(move-right, moveRight);
+
+@keyframes moveDownIn {
+  0% {
+    transform-origin: 0 0;
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes moveDownOut {
+  0% {
+    transform-origin: 0 0;
+    transform: translateY(0%);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+
+@keyframes moveLeftIn {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateX(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes moveLeftOut {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+@keyframes moveRightIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0 0;
+    transform: translateX(100%);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0 0;
+    transform: translateX(0%);
+  }
+}
+
+@keyframes moveRightOut {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+@keyframes moveUpIn {
+  0% {
+    transform-origin: 0 0;
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes moveUpOut {
+  0% {
+    transform-origin: 0 0;
+    transform: translateY(0%);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}

style/core/motion/other.less

@@ -0,0 +1,10 @@
+@keyframes loadingCircle {
+  0% {
+    transform-origin: 50% 50%;
+    transform: rotate(0deg);
+  }
+  100% {
+    transform-origin: 50% 50%;
+    transform: rotate(360deg);
+  }
+}

style/core/motion/slide.less

@@ -0,0 +1,119 @@
+.slide-motion(@className, @keyframeName) {
+  .make-motion(@className, @keyframeName);
+  .@{className}-enter {
+    opacity: 0;
+    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+  }
+  .@{className}-leave {
+    animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+  }
+}
+
+.slide-motion(slide-up, slideUp);
+.slide-motion(slide-down, slideDown);
+.slide-motion(slide-left, slideLeft);
+.slide-motion(slide-right, slideRight);
+
+@keyframes slideUpIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes slideUpOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+  }
+}
+
+@keyframes slideDownIn {
+  0% {
+    opacity: 0;
+    transform-origin: 100% 100%;
+    transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 100% 100%;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes slideDownOut {
+  0% {
+    opacity: 1;
+    transform-origin: 100% 100%;
+    transform: scaleY(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 100% 100%;
+    transform: scaleY(0);
+  }
+}
+
+@keyframes slideLeftIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleX(0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleX(1);
+  }
+}
+
+@keyframes slideLeftOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleX(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleX(0);
+  }
+}
+
+@keyframes slideRightIn {
+  0% {
+    opacity: 0;
+    transform-origin: 100% 0%;
+    transform: scaleX(0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 100% 0%;
+    transform: scaleX(1);
+  }
+}
+
+@keyframes slideRightOut {
+  0% {
+    opacity: 1;
+    transform-origin: 100% 0%;
+    transform: scaleX(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 100% 0%;
+    transform: scaleX(0);
+  }
+}

style/core/motion/swing.less

@@ -0,0 +1,30 @@
+.swing-motion(@className, @keyframeName) {
+  .@{className}-enter {
+    .motion-common();
+    animation-play-state: paused;
+  }
+  .@{className}-enter.@{className}-enter-active {
+    animation-name: ~"@{keyframeName}In";
+    animation-play-state: running;
+  }
+}
+
+.swing-motion(swing, swing);
+
+@keyframes swingIn {
+  0%, 100% {
+    transform: translateX(0px);
+  }
+  20% {
+    transform: translateX(-10px);
+  }
+  40% {
+    transform: translateX(10px);
+  }
+  60% {
+    transform: translateX(-5px);
+  }
+  80% {
+    transform: translateX(5px);
+  }
+}

style/core/motion/zoom.less

@@ -0,0 +1,146 @@
+.zoom-motion(@className, @keyframeName) {
+  .make-motion(@className, @keyframeName);
+  .@{className}-enter {
+    opacity: 0;
+    animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  }
+  .@{className}-leave {
+    animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
+  }
+}
+
+.zoom-motion(zoom, zoom);
+.zoom-motion(zoom-up, zoomUp);
+.zoom-motion(zoom-down, zoomDown);
+.zoom-motion(zoom-left, zoomLeft);
+.zoom-motion(zoom-right, zoomRight);
+
+@keyframes zoomIn {
+  0% {
+    opacity: 0;
+    transform-origin: 50% 50%;
+    transform: scale(0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 50% 50%;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes zoomOut {
+  0% {
+    opacity: 1;
+    transform-origin: 50% 50%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 50%;
+    transform: scale(0, 0);
+  }
+}
+
+@keyframes zoomUpIn {
+  0% {
+    opacity: 0;
+    transform-origin: 50% 0%;
+    transform: scale(0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 50% 0%;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes zoomUpOut {
+  0% {
+    opacity: 1;
+    transform-origin: 50% 0%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 0%;
+    transform: scale(0, 0);
+  }
+}
+
+@keyframes zoomLeftIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 50%;
+    transform: scale(0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0% 50%;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes zoomLeftOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 50%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 0% 50%;
+    transform: scale(0, 0);
+  }
+}
+
+@keyframes zoomRightIn {
+  0% {
+    opacity: 0;
+    transform-origin: 100% 50%;
+    transform: scale(0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 100% 50%;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes zoomRightOut {
+  0% {
+    opacity: 1;
+    transform-origin: 100% 50%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 100% 50%;
+    transform: scale(0, 0);
+  }
+}
+
+@keyframes zoomDownIn {
+  0% {
+    opacity: 0;
+    transform-origin: 50% 100%;
+    transform: scale(0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 50% 100%;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes zoomDownOut {
+  0% {
+    opacity: 1;
+    transform-origin: 50% 100%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 100%;
+    transform: scale(0, 0);
+  }
+}

style/mixins/iconfont.less

@@ -0,0 +1,18 @@
+.iconfont-mixin() {
+  position: relative;
+  display: inline-block;
+  font-style: normal;
+  vertical-align: baseline;
+  text-align: center;
+  text-transform: none;
+  text-rendering: auto;
+  // 更好地渲染字体
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: 0px;
+  -moz-osx-font-smoothing: grayscale;
+
+  &:before {
+    display: block;
+    font-family: "anticon" !important;
+  }
+}