Merge from master

docs/spec/motion.md

@@ -8,6 +8,10 @@
 
 Ant Design 提供了一些预设的组件动画样式。
 
+可以使用 [rc-animate](https://github.com/react-component/animate) 的 [transitionName](http://react-component.github.io/animate/examples/simple.html) 属性来给任意元素指定动画。
+
+> 示例延长了动画时长以便展示。
+
 `````__react
 const cssAnimation = require('css-animation');
 const Select = antd.Select;
@@ -165,24 +169,23 @@ motions = motions.concat([[{
   direction: 'enter',
   type: '其他'
 }]]);
-const leave='-leave';
-const Test = React.createClass({
+
+var leave = '-leave';
+var Test = React.createClass({
   handleChange(e) {
-    const value = e;
-    if(value){
-      this.demoNode.style.visibility='';
+    var value = e;
+    if (value) {
+      this.demoNode.style.visibility = '';
       cssAnimation(this.demoNode, value, () => {
-        if(value.slice(-leave.length)===leave){
-          this.demoNode.style.visibility='hidden';
+        if (value.slice(-leave.length) === leave) {
+          this.demoNode.style.visibility = 'hidden';
         }
       });
     }
   },
-
   componentDidMount() {
     this.demoNode = ReactDOM.findDOMNode(this.refs.demo);
   },
-
   render() {
     const options = [<Option value="" key="placeholder">请选择预设动画</Option>].concat(motions.map(function (m, groupIndex) {
       const opts = m.map(function (m2, optIndex) {
@@ -204,22 +207,20 @@ const Test = React.createClass({
 ReactDOM.render(<Test key="motion" />, mountNode);
 `````
 
-## 组件动画
-
-通过设置组件的 `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`                                          |
+|--------------|--------------------|-------------------------------------------------|
+| 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`                                          |
+| Badge        | 徽标数              | `zoom`                                          |
 | message      | 信息提示条          | `move-up`                                       |
 | notification | 通知框              | `move-right` & `slide-up`                       |
-| dropdown     | 下拉菜单            | `slide-up`                                      |
-| select       | 选择框              | `slide-up`                                      |
-| datepicker   | 日期选择框          | `slide-up`                                      |
-| alert        | 警告提示            | `slide-up`                                      |
-| menu         | 导航菜单            | `slide-up`                                      |
-| datepicker   | 日期选择框          | `slide-up`                                      |
+| Dropdown     | 下拉菜单            | `slide-up`                                      |
+| Select       | 选择框              | `slide-up`                                      |
+| Cascader     | 级联选择框          | `slide-up`                                      |
+| TreeSelect   | 树选择框            | `slide-up`                                      |
+| DatePicker   | 日期选择框          | `slide-up`                                      |
+| TatePicker   | 日期选择框          | `slide-up`                                      |
+| Alert        | 警告提示            | `slide-up`                                      |
+| Menu         | 导航菜单            | `slide-up`                                      |

site/common/styles/motion.less

@@ -2,8 +2,10 @@
   height: 190px;
   line-height: 190px;
   text-align: center;
-  margin-bottom: 20px;
+  margin: 40px 0 20px;
+  width: 80%;
 }
+
 .motion-example {
   width: 180px;
   height: 180px;
@@ -13,23 +15,27 @@
   text-align: center;
   display: inline-block !important;
   border-radius: 8px;
+  animation-duration: 0.5s !important;
   font-weight: bold;
   background: url(https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg) center/230px;
 }
-.motion-select-wrapper{
+
+.motion-select-wrapper {
   text-align: center;
+  margin-bottom: 40px;
+  width: 80%;
 }
+
 .motion-select {
   text-align:left;
   width:180px;
 }
 
-.video-player{
+.video-player {
   position: relative;
   max-width: 800px;
-
   &-right {
     width: 616px;
     float: right;
   }
-}
+}