Merge branch 'master' of github.com:ant-design/ant-design

components/breadcrumb/demo/router.md

@@ -2,13 +2,12 @@
 
 - order: 2
 
-和 `react-router@1.0.0-beta3` 进行结合使用。
+和 `react-router@1.x` 进行结合使用。
 
 ---
 
 ````jsx
 var ReactRouter = require('react-router');
-var history = require('react-router/lib/HashHistory').history;
 var Router = ReactRouter.Router;
 var Route = ReactRouter.Route;
 var Link = ReactRouter.Link;
@@ -37,13 +36,13 @@ var Home = React.createClass({
         paddingBottom: 15,
         borderBottom: '1px dashed #ccc'
       }}>点击上面的导航切换页面，面包屑在下面：</div>
-      <Breadcrumb router={ReactRouter} />
+      <Breadcrumb {...this.props} router={ReactRouter} />
     </div>);
   }
 });
 
 React.render((
-  <Router history={history}>
+  <Router>
     <Route name="home" breadcrumbName="首页" path="/" component={Home} ignoreScrollBehavior>
       <Route name="apps" breadcrumbName="应用列表" path="apps" component={Apps}>
         <Route name="app" breadcrumbName="应用:id" path=":id" />

components/breadcrumb/index.jsx

@@ -18,27 +18,27 @@ let BreadcrumbItem = React.createClass({
 
 let Breadcrumb = React.createClass({
   propTypes: {
-    router: React.PropTypes.object
+    router: React.PropTypes.object,
-  },
+    routes: React.PropTypes.array,
-  contextTypes: {
+    params: React.PropTypes.object
-    router: React.PropTypes.object
   },
   render() {
-    let crumbs, routes, params;
+    let crumbs;
     let ReactRouter = this.props.router;
-    if (this.context.router && ReactRouter) {
+    let routes = this.props.routes;
+    let params = this.props.params;
+    if (routes && routes.length > 0 && ReactRouter) {
       let Link = ReactRouter.Link;
-      routes = this.context.router.state.branch;
-      params = this.context.router.state.params;
       crumbs = routes.map(function(route, i) {
         let name = route.breadcrumbName.replace(/\:(.*)/g, function(replacement, key) {
           return params[key] || replacement;
         });
         let link;
+        let path = route.path.indexOf('/') === 0 ? route.path : ('/' + route.path);
         if (i === routes.length - 1) {
           link = <span>{name}</span>;
         } else {
-          link = <Link to={route.path} params={params}>{name}</Link>;
+          link = <Link to={path} params={params}>{name}</Link>;
         }
         return <BreadcrumbItem key={name}>{link}</BreadcrumbItem>;
       });

components/breadcrumb/index.md

@@ -13,3 +13,28 @@
 - 当系统拥有超过两级以上的层级结构时；
 - 当需要告知用户“你在哪里”时；
 - 当需要向上导航的功能时。
+
+## API
+
+```html
+<Breadcrumb>
+  <Breadcrumb.Item>首页</Breadcrumb.Item>
+  <Breadcrumb.Item href="">应用中心</Breadcrumb.Item>
+  <Breadcrumb.Item href="">应用列表</Breadcrumb.Item>
+  <Breadcrumb.Item>某应用</Breadcrumb.Item>
+</Breadcrumb>
+```
+
+### Breadcrumb
+
+| 参数      | 说明                                     | 类型       |  可选值 | 默认值 |
+|-----------|------------------------------------------|------------|---------|--------|
+| router    | 可传入 react-router 的实例               | Object     |         | -      |
+| routes    | router 的路由栈信息                      | Array      |         | -      |
+| params    | 路由的参数                               | Object     |         | -      |
+
+### Breadcrumb.Item
+
+| 参数      | 说明                                     | 类型       |  可选值 | 默认值 |
+|-----------|------------------------------------------|------------|---------|--------|
+| href      | 链接，如不传则不可点击                   | string     |         | -      |

components/enter-animation/demo/basic.md

@@ -1,9 +1,8 @@
-# 默认
+# 进场和离场
 
-- order: 0
+- order: 1
-
-默认子节点进场动画。
 
+自动。
 
 ---
 
@@ -13,12 +12,12 @@ var EnterAnimation = antd.EnterAnimation;
 var Test = React.createClass({
   getInitialState() {
     return {
-      show:true,
+      show: true
     }
   },
   onClick() {
     this.setState({
-      show:!this.state.show,
+      show: !this.state.show
     })
   },
   render() {
@@ -28,22 +27,8 @@ var Test = React.createClass({
           <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
         </div>
         <EnterAnimation>
-          {this.state.show ? <div key='a'>
+          {this.state.show ?
-            <div className="demo-header">
+            <div className="demo-content" key='a'>
-              <div className="logo">
-                <img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
-                <span>logo</span>
-              </div>
-              <ul>
-                <li></li>
-                <li></li>
-                <li></li>
-                <li></li>
-                <li></li>
-              </ul>
-            </div>
-            <div className="demo-content" >
-              <div className="demo-title">我是标题</div>
               <div className="demo-kp">
                 <ul>
                   <li></li>
@@ -51,7 +36,6 @@ var Test = React.createClass({
                   <li></li>
                 </ul>
               </div>
-              <div className="demo-title">我是标题</div>
               <div className="demo-listBox">
                 <div className="demo-list">
                   <div className="title"></div>
@@ -59,13 +43,9 @@ var Test = React.createClass({
                     <li></li>
                     <li></li>
                     <li></li>
-                    <li></li>
-                    <li></li>
                   </ul>
                 </div>
               </div>
-            </div>
-            <div className="demo-footer"></div>
           </div> : null}
         </EnterAnimation>
       </div>

components/enter-animation/demo/enter-data.md

@@ -1,6 +1,6 @@
 # 指定节点动画进出场
 
-- order: 2
+- order: 3
 
 通过加上 `enter-data` 属性来指定需要动画进场的元素，并且可以定义每个元素的动画效果。
 
@@ -18,6 +18,7 @@ var Test = React.createClass({
         interval: .1,
       },
       leave: {
+        type:'left',
         interval: 0.03
       },
       show: true
@@ -37,7 +38,6 @@ var Test = React.createClass({
         <EnterAnimation enter={this.state.enter} leave={this.state.leave}>
         {this.state.show ? <div key='enter-data'>
           <div className="demo-content">
-            <div className="demo-title" enter-data={{type: 'alpha'}}>我是标题</div>
             <div className="demo-kp">
               <ul>
                 <li enter-data></li>
@@ -45,7 +45,6 @@ var Test = React.createClass({
                 <li enter-data></li>
               </ul>
             </div>
-            <div className="demo-title" enter-data={{type: 'alpha', queueId: 1, delay: 0.8}} leave-data={{delay: 0.1}}>我是标题</div>
             <div className="demo-listBox">
               <div className="demo-list">
                 <div className="title" enter-data={{type: 'bottom', queueId: 1}}></div>

components/enter-animation/demo/enter-leave.md

@@ -1,6 +1,6 @@
 # 配置进出场的样式
 
-- order: 1
+- order: 2
 
 配置进出场动画样式。
 
@@ -43,22 +43,8 @@ var Test = React.createClass({
           <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
         </div>
         <EnterAnimation enter={this.state.enter} leave={this.state.leave}>
-          {this.state.show ? <div key='a'>
+          {this.state.show ? 
-            <div className="demo-header">
+            <div className="demo-content" key='demo'>
-              <div className="logo">
-                <img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
-                <span>logo</span>
-              </div>
-              <ul>
-                <li></li>
-                <li></li>
-                <li></li>
-                <li></li>
-                <li></li>
-              </ul>
-            </div>
-            <div className="demo-content" >
-              <div className="demo-title">我是标题</div>
               <div className="demo-kp">
                 <ul>
                   <li></li>
@@ -66,7 +52,6 @@ var Test = React.createClass({
                   <li></li>
                 </ul>
               </div>
-              <div className="demo-title">我是标题</div>
               <div className="demo-listBox">
                 <div className="demo-list">
                   <div className="title"></div>
@@ -74,13 +59,9 @@ var Test = React.createClass({
                     <li></li>
                     <li></li>
                     <li></li>
-                    <li></li>
-                    <li></li>
                   </ul>
                 </div>
               </div>
-            </div>
-            <div className="demo-footer"></div>
           </div> : null}
         </EnterAnimation>
       </div>

components/enter-animation/demo/form.md

@@ -1,6 +1,6 @@
 # 表单动画进出场
 
-- order: 4
+- order: 6
 
 表单组合的进场与出场动画。
 
@@ -26,6 +26,7 @@ var Test = React.createClass({
         type: 'left',
         reverse: true,
         interval: 0.05,
+        ease:'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
         callback: ()=> {
           console.log('出场结束')
         }

components/enter-animation/demo/page.md

@@ -0,0 +1,95 @@
+# 页面的进场和离场
+
+- order: 5
+
+页面的进场和离场。
+
+---
+
+````jsx
+var EnterAnimation = antd.EnterAnimation;
+
+var Test = React.createClass({
+  getInitialState() {
+    return {
+      show: true,
+      enter:{
+        type:'right',
+        ease:'cubic-bezier(0.19, 1, 0.22, 1)'
+      },
+      leave:{
+        type:'left',
+        ease:'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
+        reverse:true,
+        interval:0.05
+      }
+    }
+  },
+  onClick() {
+    this.setState({
+      show: !this.state.show
+    })
+  },
+  render() {
+    return (
+      <div>
+        <div style={{marginBottom: 20}}>
+          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
+        </div>
+        <EnterAnimation enter={this.state.enter} leave={this.state.leave}>
+          {this.state.show ? <div key='a'>
+            <div className="demo-header" enter-data leave-data={{type:'alpha'}}>
+              <div className="logo" leave-data={{type:'left'}}>
+                <img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
+                <span>logo</span>
+              </div>
+              <ul >
+                <li enter-data leave-data={{type:'right'}}></li>
+                <li enter-data leave-data={{type:'right'}}></li>
+                <li enter-data leave-data={{type:'right'}}></li>
+                <li enter-data leave-data={{type:'right'}}></li>
+                <li enter-data leave-data={{type:'right'}}></li>
+              </ul>
+            </div>
+            <div className="demo-content" >
+              <div className="demo-title" enter-data={{type:'bottom'}} leave-data={{type:'bottom',queueId:1}}>我是标题</div>
+              <div className="demo-kp">
+                <ul>
+                  <li enter-data={{interval:0.05}} leave-data={{type:'bottom',queueId:1}}></li>
+                  <li enter-data={{interval:0.05}} leave-data={{type:'bottom',queueId:1}}></li>
+                  <li enter-data={{interval:0.05}} leave-data={{type:'bottom',queueId:1,delay:0.2}}></li>
+                </ul>
+              </div>
+              <div className="demo-title" enter-data={{type:'bottom'}} leave-data={{type:'bottom',queueId:2}}>我是标题</div>
+              <div className="demo-listBox">
+                <div className="demo-list">
+                  <div className="title" enter-data={{type:'bottom'}} leave-data={{queueId:2}}></div>
+                  <ul>
+                    <li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
+                    <li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
+                    <li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
+                    <li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
+                    <li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div className="demo-footer" enter-data={{type:'bottom'}} leave-data={{queueId:2}}></div>
+          </div> : null}
+        </EnterAnimation>
+      </div>
+    );
+  }
+});
+
+React.render(<Test />
+, document.getElementById('components-enter-animation-demo-page'));
+````
+
+<style>
+#components-enter-animation-demo-page {
+  text-align: center;
+  overflow: hidden;
+  margin: 20px auto;
+}
+</style>

components/enter-animation/demo/router.md

@@ -1,6 +1,6 @@
 # Router 默认进出场
 
-- order: 5
+- order: 7
 
 router 组合的进场与出场动画。
 
@@ -8,7 +8,6 @@ router 组合的进场与出场动画。
 
 ````jsx
 var ReactRouter = require('react-router');
-var history = require('react-router/lib/HashHistory').history;
 var Router = ReactRouter.Router;
 var Route = ReactRouter.Route;
 var Link = ReactRouter.Link;
@@ -30,6 +29,9 @@ var App = React.createClass({
     return (
       <div>
         <Menu style={{marginBottom: 20}} mode="horizontal">
+          <Menu.Item key='home'>
+            <Link to="/" onClick={this.clickPage}>首页</Link>
+          </Menu.Item>
           <Menu.Item key='page1'>
             <Link to="/page1" onClick={this.clickPage}>Page 1</Link>
           </Menu.Item>
@@ -72,7 +74,7 @@ var Page2 = React.createClass({
   }
 });
 React.render((
-  <Router history={history}>
+  <Router>
     <Route path="/" component={App} ignoreScrollBehavior>
       <Route path="page1" component={Page1} />
       <Route path="page2" component={Page2} />

components/enter-animation/demo/simple.md

@@ -0,0 +1,27 @@
+# 默认
+
+- order: 0
+
+最简单的进场例子。
+
+---
+
+````jsx
+var EnterAnimation = antd.EnterAnimation;
+
+React.render(
+  <EnterAnimation>
+    <ul key="key">
+      <li>依次进场</li>
+      <li>依次进场</li>
+      <li>依次进场</li>
+      <li>依次进场</li>
+      <li>依次进场</li>
+      <li>依次进场</li>
+      <li>依次进场</li>
+      <li>依次进场</li>
+    </ul>
+  </EnterAnimation>
+, document.getElementById('components-enter-animation-demo-simple'));
+````
+

components/enter-animation/demo/style.md

@@ -1,6 +1,6 @@
 # style 自定义样式动画进出场
 
-- order: 3
+- order: 4
 
 通过加上属性里的 `style` 来自定义 CSS 动画进出场。
 
@@ -40,7 +40,6 @@ var Test = React.createClass({
         <EnterAnimation enter={this.state.enter} leave={this.state.leave}>
         {this.state.show ? <div key='enter-data'>
           <div className="demo-content">
-            <div className="demo-title" enter-data={{style: {opacity: 0}}}>我是标题</div>
             <div className="demo-kp">
               <ul>
                 <li enter-data></li>
@@ -48,7 +47,6 @@ var Test = React.createClass({
                 <li enter-data></li>
               </ul>
             </div>
-            <div className="demo-title" enter-data={{style: {opacity: 0}, queueId: 1, delay: 0.8}} leave-data={{delay: 0.1}}>我是标题</div>
             <div className="demo-listBox">
               <div className="demo-list">
                 <div className="title" enter-data={{style: {transform: 'translateY(30px)', opacity: 0}, queueId: 1}}></div>

components/enter-animation/index.md

@@ -33,7 +33,7 @@
 如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历 dom 下一级节点来执行动画。
 
 ```html
-<EnterAnimation type="left" delay={2}>
+<EnterAnimation enter={type:'left',delay:2}>
   <div key='demo'>
     <div>
       <div enter-data>

components/index.html

@@ -1 +0,0 @@
-<meta http-equiv="refresh" content="0; url=/components/button" />

components/menu/demo/sider-current.md

@@ -0,0 +1,64 @@
+# 只展开当前父级菜单
+
+- order: 2
+
+点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。
+
+---
+
+````jsx
+var Menu = antd.Menu;
+var SubMenu = Menu.SubMenu;
+
+var Sider = React.createClass({
+  getInitialState() {
+    return {
+      current: '1',
+      openKeys: []
+    }
+  },
+  handleClick(e) {
+    console.log('click ', e);
+    this.setState({
+      current: e.key,
+      openKeys: e.keyPath.slice(1)
+    });
+  },
+  onToggle(info){
+    this.setState({
+      openKeys: info.openKeys
+    });
+  },
+  render() {
+    return <Menu onClick={this.handleClick}
+                 style={{width:240}}
+                 openKeys={this.state.openKeys}
+                 onOpen={this.onToggle}
+                 onClose={this.onToggle}
+                 selectedKeys={[this.state.current]}
+                 mode="inline">
+      <SubMenu key="sub1" title={<span><i className="anticon anticon-mail"></i><span>导航一</span></span>}>
+        <Menu.Item key="1">选项1</Menu.Item>
+        <Menu.Item key="2">选项2</Menu.Item>
+        <Menu.Item key="3">选项3</Menu.Item>
+        <Menu.Item key="4">选项4</Menu.Item>
+      </SubMenu>
+      <SubMenu key="sub2" title={<span><i className="anticon anticon-appstore"></i><span>导航二</span></span>}>
+        <Menu.Item key="5">选项5</Menu.Item>
+        <Menu.Item key="6">选项6</Menu.Item>
+        <SubMenu key="sub3" title="三级导航">
+          <Menu.Item key="7">选项7</Menu.Item>
+          <Menu.Item key="8">选项8</Menu.Item>
+        </SubMenu>
+      </SubMenu>
+      <SubMenu key="sub4" title={<span><i className="anticon anticon-setting"></i><span>导航三</span></span>}>
+        <Menu.Item key="9">选项9</Menu.Item>
+        <Menu.Item key="10">选项10</Menu.Item>
+        <Menu.Item key="11">选项11</Menu.Item>
+        <Menu.Item key="12">选项12</Menu.Item>
+      </SubMenu>
+    </Menu>;
+  }
+});
+React.render(<Sider />, document.getElementById('components-menu-demo-sider-current'));
+````

components/menu/demo/vertical.md

@@ -1,6 +1,6 @@
 # 垂直菜单
 
-- order: 2
+- order: 3
 
 子菜单是弹出的形式。
 

components/table/index.jsx

@@ -473,12 +473,14 @@ let AntTable = React.createClass({
       return column;
     });
     let emptyText;
+    let emptyClass = '';
     if (!data || data.length === 0) {
-      emptyText = <div className="ant-table-empty">
+      emptyText = <div className="ant-table-placeholder">
         <i className="anticon anticon-frown"></i>暂无数据
       </div>;
+      emptyClass = ' ant-table-empty';
     }
-    return <div className="clearfix">
+    return <div className={'clearfix' + emptyClass}>
       <Table
         {...this.props}
         data={data}

docs/download.md

@@ -5,7 +5,48 @@
 
 ---
 
-可以直接下载文件或使用 npm 进行安装。
+可以使用 npm 进行安装或直接下载文件。
+
+## 从 npm 安装
+
+**我们推荐使用 npm 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
+
+可以通过 npm 直接安装到本地，使用 `require` 或 `import` 进行引用。
+
+[![npm package](http://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
+
+```bash
+$ npm install antd --save
+```
+
+安装最新的开发版本：
+
+[![](https://cnpmjs.org/badge/v/antd.svg?&tag=beta&subject=npm)](https://www.npmjs.org/package/antd)
+
+```bash
+$ npm install antd@beta --save
+```
+
+### 开发工具
+
+我们提供了开发构建的命令行工具，可以安装到全局直接使用。
+
+```bash
+$ npm install antd-bin -g
+```
+
+或者安装到仓库下，使用 `package.json` 的 `scripts` 字段来配置命令：
+
+```bash
+$ npm install antd-bin --save-dev
+```
+
+```json
+"scripts": {
+  "dev": "antd server",
+  "build": "antd build"
+}
+```
 
 ## 直接下载
 
@@ -34,47 +75,6 @@
 
 - **历史版本**：https://github.com/ant-design/ant-design/releases
 
-## npm
-
-**我们推荐使用 npm 的方式进行开发**，这样可以享受整个生态圈和工具链带来的诸多好处。
-
-可以通过 npm 直接安装到本地，使用 `require` 或 `import` 进行引用。
-
-[![npm package](http://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
-
-```bash
-$ npm install antd --save
-```
-
-安装最新的开发版本：
-
-[![](https://cnpmjs.org/badge/v/antd.svg?&tag=beta&subject=npm)](https://www.npmjs.org/package/antd)
-
-```bash
-$ npm install antd@beta --save
-```
-
-## 开发工具
-
-我们提供了开发构建的命令行工具，可以安装到全局直接使用：
-
-```bash
-$ npm install antd-bin -g
-```
-
-或者安装到仓库下，使用 `package.json` 的 `scripts` 字段来配置命令：
-
-```bash
-$ npm install antd-bin --save-dev
-```
-
-```json
-"scripts": {
-  "dev": "antd server",
-  "build": "antd build"
-}
-```
-
 <style>
 .versions {
   font-weight: bold;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "0.9.1-beta1",
+  "version": "0.9.1-beta4",
   "stableVersion": "0.9.0",
   "title": "Ant Design",
   "description": "一个 UI 设计语言",
@@ -33,7 +33,7 @@
   "license": "MIT",
   "dependencies": {
     "css-animation": "~1.1.0",
-    "enter-animation": "~0.4.9",
+    "enter-animation": "~0.5.0",
     "gregorian-calendar": "~3.0.0",
     "gregorian-calendar-format": "~3.0.1",
     "object-assign": "~4.0.1",
@@ -45,7 +45,7 @@
     "rc-dropdown": "~1.3.3",
     "rc-form-validation": "~2.4.7",
     "rc-input-number": "~2.0.1",
-    "rc-menu": "~4.4.2",
+    "rc-menu": "~4.6.0",
     "rc-notification": "~1.1.0",
     "rc-pagination": "~1.1.0",
     "rc-progress": "~1.0.0",
@@ -66,7 +66,7 @@
     "velocity-animate": "~1.2.2"
   },
   "devDependencies": {
-    "autoprefixer-loader": "^2.0.0",
+    "autoprefixer-loader": "^3.1.0",
     "babel": "^5.8.12",
     "babel-core": "^5.8.12",
     "babel-eslint": "^4.1.0",
@@ -87,7 +87,7 @@
     "lodash": "^3.10.0",
     "nico-jsx": "~0.5.8",
     "precommit-hook": "^1.0.7",
-    "react-router": "1.0.0-beta3",
+    "react-router": "1.0.0-rc1",
     "webpack": "^1.10.1",
     "webpack-dev-middleware": "^1.2.0"
   },

scripts/demo.js

@@ -1,6 +1,5 @@
 window['css-animation'] = require('css-animation');
 window['react-router'] = require('react-router');
-window['react-router']['HashHistory'] = require('react-router/lib/HashHistory');
 var antd = require('antd');
 
 var $ = require('jquery');

spec/easing.md

@@ -2,6 +2,8 @@
 
 - category: 动画
 - order: 0
+- noinstant: true
+
 
 ---
 

style/components/datepicker/DecadePanel.less

@@ -7,6 +7,7 @@
   z-index: 10;
   position: absolute;
   outline: none;
+  border-radius: @border-radius-base;
 }
 
 .@{calendar-prefix-cls}-decade-panel-hidden {

style/components/datepicker/MonthPanel.less

@@ -7,6 +7,7 @@
   z-index: 10;
   position: absolute;
   outline: none;
+  border-radius: @border-radius-base;
 }
 
 .@{calendar-prefix-cls}-month-panel-hidden {

style/components/datepicker/TimePanel.less

@@ -8,6 +8,7 @@
   position: absolute;
   outline: none;
   border-radius: 6px;
+  border-radius: @border-radius-base;
 }
 
 .@{calendar-prefix-cls}-time-panel-header {

style/components/datepicker/YearPanel.less

@@ -7,6 +7,7 @@
   z-index: 10;
   position: absolute;
   outline: none;
+  border-radius: @border-radius-base;
 }
 
 .@{calendar-prefix-cls}-year-panel-hidden {

style/components/dialog/Mask.less

@@ -17,35 +17,4 @@
     filter: alpha(opacity=50);
   }
 
-  &-wrap-hidden > &-mask&-fade-enter,
-  &-wrap-hidden > &-mask&-fade-leave {
-    display: block;
-  }
-
-  .fade-effect() {
-    animation-duration: 0.3s;
-    animation-fill-mode: both;
-    animation-timing-function: @ease-in;
-  }
-
-  &-fade-enter {
-    opacity: 0;
-    .fade-effect();
-    animation-play-state: paused;
-  }
-
-  &-fade-leave {
-    .fade-effect();
-    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;
-  }
 }

style/components/form.less

@@ -67,6 +67,7 @@ input[type="checkbox"] {
 // Form items
 // You should wrap labels and controls in .@{css-prefix}form-item for optimum spacing
 .@{css-prefix}form-item {
+  font-size: @font-size-base;
   margin-bottom: @form-item-margin-bottom;
   color: #666;
 
@@ -111,10 +112,6 @@ input[type="checkbox"] {
 
 // 表单下的输入框尺寸唯一: 大尺寸
 form {
-  * {
-    font-size: @font-size-base;
-    line-height: @line-height-base;
-  }
   .has-feedback {
     .@{iconfont-css-prefix} {
       .square(@input-height-lg);

style/components/menu.less

@@ -10,6 +10,7 @@
   box-shadow: @overlay-shadow;
   border-radius: @border-radius-base;
   color: @text-color;
+  background: #fff;
 
   &-item-group-list {
     margin: 0;

style/components/table.less

@@ -7,7 +7,10 @@
 .@{table-prefix-cls} {
   font-size: @font-size-base;
   color: @text-color;
-  transition: opacity 0.3s ease;
+
+  &-body {
+    transition: opacity 0.3s ease;
+  }
 
   table {
     width: 100%;
@@ -77,10 +80,10 @@
   }
 
   &-loading {
-    .ant-table-body {
+    position: relative;
+    .@{table-prefix-cls}-body {
       opacity: 0.42;
     }
-    position: relative;
     &:after {
       position: absolute;
       display: inline-block;
@@ -179,13 +182,25 @@
   }
 
   &-empty {
+    position: relative;
+    margin-bottom: 16px;
+  }
+
+  &-empty &-body {
+    height: 150px;
+  }
+
+  &-placeholder {
     height: 100px;
     line-height: 100px;
     text-align: center;
     font-size: 12px;
     color: #999;
     border-bottom: 1px solid #E9E9E9;
-    margin-bottom: 16px;
+    position: absolute;
+    top: 50px;
+    left: 0;
+    width: 100%;
     .anticon {
       margin-right: 4px;
       position: relative;
@@ -239,7 +254,7 @@
       width: 18px;
       height: 18px;
       text-align: center;
-      line-height: 16px;
+      line-height: 15px;
       border: 1px solid #E9E9E9;
       -webkit-user-select: none;
       user-select: none;

style/core/motion/fade.less

@@ -1,27 +1,18 @@
-.fade-enter, .fade-appear {
+.fade-motion(@className, @keyframeName) {
-  opacity: 0;
+  .make-motion(@className, @keyframeName);
-  .motion-common();
+  .@{className}-enter, .@{className}-appear {
-  animation-timing-function: linear;
+    opacity: 0;
-  animation-play-state: paused;
+    animation-timing-function: linear;
+  }
+  .@{className}-leave {
+    animation-timing-function: linear;
+  }
 }
 
-.fade-leave {
+.fade-motion(fade, antFade);
-  .motion-common();
+.fade-motion(ant-modal-fade, antFade);
-  animation-timing-function: linear;
-  animation-play-state: paused;
-}
 
-.fade-enter.fade-enter-active, .fade-appear.fade-appear-active {
+@keyframes antFadeIn {
-  animation-name: fadeIn;
-  animation-play-state: running;
-}
-
-.fade-leave.fade-leave-active {
-  animation-name: fadeOut;
-  animation-play-state: running;
-}
-
-@keyframes fadeIn {
   0% {
     opacity: 0;
   }
@@ -30,7 +21,7 @@
   }
 }
 
-@keyframes fadeOut {
+@keyframes antFadeOut {
   0% {
     opacity: 1;
   }

style/core/motion/move.less

@@ -9,12 +9,12 @@
   }
 }
 
-.move-motion(move-up, moveUp);
+.move-motion(move-up, antMoveUp);
-.move-motion(move-down, moveDown);
+.move-motion(move-down, antMoveDown);
-.move-motion(move-left, moveLeft);
+.move-motion(move-left, antMoveLeft);
-.move-motion(move-right, moveRight);
+.move-motion(move-right, antMoveRight);
 
-@keyframes moveDownIn {
+@keyframes antMoveDownIn {
   0% {
     transform-origin: 0 0;
     transform: translateY(100%);
@@ -27,7 +27,7 @@
   }
 }
 
-@keyframes moveDownOut {
+@keyframes antMoveDownOut {
   0% {
     transform-origin: 0 0;
     transform: translateY(0%);
@@ -40,7 +40,7 @@
   }
 }
 
-@keyframes moveLeftIn {
+@keyframes antMoveLeftIn {
   0% {
     transform-origin: 0 0;
     transform: translateX(-100%);
@@ -53,7 +53,7 @@
   }
 }
 
-@keyframes moveLeftOut {
+@keyframes antMoveLeftOut {
   0% {
     transform-origin: 0 0;
     transform: translateX(0%);
@@ -66,7 +66,7 @@
   }
 }
 
-@keyframes moveRightIn {
+@keyframes antMoveRightIn {
   0% {
     opacity: 0;
     transform-origin: 0 0;
@@ -79,7 +79,7 @@
   }
 }
 
-@keyframes moveRightOut {
+@keyframes antMoveRightOut {
   0% {
     transform-origin: 0 0;
     transform: translateX(0%);
@@ -92,7 +92,7 @@
   }
 }
 
-@keyframes moveUpIn {
+@keyframes antMoveUpIn {
   0% {
     transform-origin: 0 0;
     transform: translateY(-100%);
@@ -105,7 +105,7 @@
   }
 }
 
-@keyframes moveUpOut {
+@keyframes antMoveUpOut {
   0% {
     transform-origin: 0 0;
     transform: translateY(0%);

style/core/motion/slide.less

@@ -9,12 +9,12 @@
   }
 }
 
-.slide-motion(slide-up, slideUp);
+.slide-motion(slide-up, antSlideUp);
-.slide-motion(slide-down, slideDown);
+.slide-motion(slide-down, antSlideDown);
-.slide-motion(slide-left, slideLeft);
+.slide-motion(slide-left, antSlideLeft);
-.slide-motion(slide-right, slideRight);
+.slide-motion(slide-right, antSlideRight);
 
-@keyframes slideUpIn {
+@keyframes antSlideUpIn {
   0% {
     opacity: 0;
     transform-origin: 0% 0%;
@@ -27,7 +27,7 @@
   }
 }
 
-@keyframes slideUpOut {
+@keyframes antSlideUpOut {
   0% {
     opacity: 1;
     transform-origin: 0% 0%;
@@ -40,7 +40,7 @@
   }
 }
 
-@keyframes slideDownIn {
+@keyframes antSlideDownIn {
   0% {
     opacity: 0;
     transform-origin: 100% 100%;
@@ -53,7 +53,7 @@
   }
 }
 
-@keyframes slideDownOut {
+@keyframes antSlideDownOut {
   0% {
     opacity: 1;
     transform-origin: 100% 100%;
@@ -66,7 +66,7 @@
   }
 }
 
-@keyframes slideLeftIn {
+@keyframes antSlideLeftIn {
   0% {
     opacity: 0;
     transform-origin: 0% 0%;
@@ -79,7 +79,7 @@
   }
 }
 
-@keyframes slideLeftOut {
+@keyframes antSlideLeftOut {
   0% {
     opacity: 1;
     transform-origin: 0% 0%;
@@ -92,7 +92,7 @@
   }
 }
 
-@keyframes slideRightIn {
+@keyframes antSlideRightIn {
   0% {
     opacity: 0;
     transform-origin: 100% 0%;
@@ -105,7 +105,7 @@
   }
 }
 
-@keyframes slideRightOut {
+@keyframes antSlideRightOut {
   0% {
     opacity: 1;
     transform-origin: 100% 0%;

style/core/motion/swing.less

@@ -9,9 +9,9 @@
   }
 }
 
-.swing-motion(swing, swing);
+.swing-motion(swing, antSwing);
 
-@keyframes swingIn {
+@keyframes antSwingIn {
   0%, 100% {
     transform: translateX(0px);
   }

style/core/motion/zoom.less

@@ -9,14 +9,14 @@
   }
 }
 
-.zoom-motion(zoom, zoom);
+.zoom-motion(zoom, antZoom);
-.zoom-motion(zoom-big, zoomBig);
+.zoom-motion(zoom-big, antZoomBig);
-.zoom-motion(zoom-up, zoomUp);
+.zoom-motion(zoom-up, antZoomUp);
-.zoom-motion(zoom-down, zoomDown);
+.zoom-motion(zoom-down, antZoomDown);
-.zoom-motion(zoom-left, zoomLeft);
+.zoom-motion(zoom-left, antZoomLeft);
-.zoom-motion(zoom-right, zoomRight);
+.zoom-motion(zoom-right, antZoomRight);
 
-@keyframes zoomIn {
+@keyframes antZoomIn {
   0% {
     opacity: 0;
     transform: scale(0);
@@ -26,7 +26,7 @@
   }
 }
 
-@keyframes zoomOut {
+@keyframes antZoomOut {
   0% {
     transform: scale(1);
   }
@@ -35,7 +35,7 @@
     transform: scale(0);
   }
 }
-@keyframes zoomBigIn {
+@keyframes antZoomBigIn {
   0% {
     opacity: 0;
     transform: scale(.8);
@@ -45,7 +45,7 @@
   }
 }
 
-@keyframes zoomBigOut {
+@keyframes antZoomBigOut {
   0% {
     transform: scale(1);
   }
@@ -55,7 +55,7 @@
   }
 }
 
-@keyframes zoomUpIn {
+@keyframes antZoomUpIn {
   0% {
     opacity: 0;
     transform-origin: 50% 0%;
@@ -67,7 +67,7 @@
   }
 }
 
-@keyframes zoomUpOut {
+@keyframes antZoomUpOut {
   0% {
     transform-origin: 50% 0%;
     transform: scale(1);
@@ -79,7 +79,7 @@
   }
 }
 
-@keyframes zoomLeftIn {
+@keyframes antZoomLeftIn {
   0% {
     opacity: 0;
     transform-origin: 0% 50%;
@@ -91,7 +91,7 @@
   }
 }
 
-@keyframes zoomLeftOut {
+@keyframes antZoomLeftOut {
   0% {
     transform-origin: 0% 50%;
     transform: scale(1);
@@ -103,7 +103,7 @@
   }
 }
 
-@keyframes zoomRightIn {
+@keyframes antZoomRightIn {
   0% {
     opacity: 0;
     transform-origin: 100% 50%;
@@ -115,7 +115,7 @@
   }
 }
 
-@keyframes zoomRightOut {
+@keyframes antZoomRightOut {
   0% {
     transform-origin: 100% 50%;
     transform: scale(1);
@@ -127,7 +127,7 @@
   }
 }
 
-@keyframes zoomDownIn {
+@keyframes antZoomDownIn {
   0% {
     opacity: 0;
     transform-origin: 50% 100%;
@@ -139,7 +139,7 @@
   }
 }
 
-@keyframes zoomDownOut {
+@keyframes antZoomDownOut {
   0% {
     transform-origin: 50% 100%;
     transform: scale(1);