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

CHANGELOG.md

@@ -58,6 +58,11 @@
 
 * 修改 Radio.Group 容器的盒模型属性为 inline-block 。
 
+### Enter Animation
+
+* 大幅度的重构，全新 API 的设计。
+* 支持和 react-router 结合使用。
+
 ### 其他
 
 * 新增 [timeline](http://ant.design/components/timeline) 和 [badge](http://ant.design/components/badge) 组件。

components/enter-animation/demo/basic.md

@@ -2,7 +2,7 @@
 
 - order: 0
 
-默认子节点进场动画。为避免与本站页面的进场冲突，所以 `EnterAnimation` 里延时 1 秒，递增 `interval` 为 0.3。
+默认子节点进场动画。
 
 
 ---
@@ -11,75 +11,62 @@
 var EnterAnimation = antd.EnterAnimation;
 
 var Test = React.createClass({
-  getInitialState(){
+  getInitialState() {
     return {
-      direction:'enter',
-      upend:false,
-      type:'right',
-      interval:0.3
+      bool:true,
     }
   },
-  onEnter(){
+  onClick() {
     this.setState({
-      direction:'enter',
-      upend:false,
-      type:'right',
-      interval:0.3
-    })
-  },
-  onLeave(){
-    this.setState({
-      direction:'leave',
-      upend:false,
-      type:'left',
-      interval:.1
+      bool:!this.state.bool,
     })
   },
   render() {
     return (
       <div>
-        <div style={{marginBottom:20}}>
-          <button className="ant-btn ant-btn-primary" onClick={this.onEnter}>进场</button>
-          <button className="ant-btn ant-btn-primary" style={{marginLeft:20}} onClick={this.onLeave}>出场</button>
+        <div style={{marginBottom: 20}}>
+          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
         </div>
-        <EnterAnimation interval={this.state.interval} type={this.state.type} upend={this.state.upend} direction={this.state.direction}>
-          <div className="demo-header" enter-data>
-            <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" enter-data>
-            <div className="demo-title">我是标题</div>
-            <div className="demo-kp">
+        <EnterAnimation>
+          {this.state.bool ? <div key='a'>
+            <div className="demo-header">
+              <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-title">我是标题</div>
-            <div className="demo-listBox">
-              <div className="demo-list">
-                <div className="title"></div>
+            <div className="demo-content" >
+              <div className="demo-title">我是标题</div>
+              <div className="demo-kp">
                 <ul>
                   <li></li>
                   <li></li>
                   <li></li>
-                  <li></li>
-                  <li></li>
                 </ul>
               </div>
+              <div className="demo-title">我是标题</div>
+              <div className="demo-listBox">
+                <div className="demo-list">
+                  <div className="title"></div>
+                  <ul>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                  </ul>
+                </div>
+              </div>
             </div>
-          </div>
-          <div className="demo-footer" enter-data></div>
+            <div className="demo-footer"></div>
+          </div> : null}
         </EnterAnimation>
       </div>
     );
@@ -92,7 +79,6 @@ React.render(<Test />
 
 <style>
 #components-enter-animation-demo-basic {
-  width: 600px;
   text-align: center;
   overflow: hidden;
   margin: 20px auto;

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

@@ -1,8 +1,8 @@
-# 指定节点动画进场
+# 指定节点动画进出场
 
-- order: 1
+- order: 2
 
-通过加上 `enter-data` 属性来指定需要动画进场的元素，并且可以定义每个元素的动画效果，用到的参数有 `type` `queueId` `delay`。
+通过加上 `enter-data` 属性来指定需要动画进场的元素，并且可以定义每个元素的动画效果。
 
 
 ---
@@ -11,81 +11,55 @@
 var EnterAnimation = antd.EnterAnimation;
 
 var Test = React.createClass({
-  getInitialState(){
+  getInitialState() {
     return {
-      direction:'enter',
-      upend:false,
-      type:'right',
-      interval:0.1,
-      delay:0.7
+      enter: {
+        type: 'right',
+        interval: .1,
+      },
+      leave: {
+        interval: 0.03
+      },
+      show: true
     }
   },
-  onEnter(){
+  onClick() {
     this.setState({
-      direction:'enter',
-      upend:false,
-      type:'right',
-      interval:0.05,
-      delay:0.7
+      show: !this.state.show
     })
   },
-  onLeave(){
-    this.setState({
-      direction:'leave',
-      upend:false,
-      type:'right',
-      interval:.03,
-      delay:0.1
-    })
-
-  },
   render() {
     return (
-    <div>
-      <div style={{marginBottom:20}}>
-        <button className="ant-btn ant-btn-primary" onClick={this.onEnter}>进场</button>
-        <button className="ant-btn ant-btn-primary" style={{marginLeft:20}} onClick={this.onLeave}>出场</button>
-      </div>
-      <EnterAnimation interval={this.state.interval} type={this.state.type} upend={this.state.upend} direction={this.state.direction}>
-        <div className="demo-header" enter-data={{type: 'alpha'}}>
-          <div className="logo" enter-data={{type: 'left'}}>
-            <img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg"/>
-            <span>logo</span>
-          </div>
-          <ul>
-            <li enter-data></li>
-            <li enter-data></li>
-            <li enter-data></li>
-            <li enter-data></li>
-            <li enter-data></li>
-          </ul>
+      <div>
+        <div style={{marginBottom: 20}}>
+          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
         </div>
-        <div className="demo-content">
-          <div className="demo-title" enter-data={{type:'alpha'}}>我是标题</div>
-          <div className="demo-kp">
-            <ul>
-              <li enter-data></li>
-              <li enter-data></li>
-              <li enter-data></li>
-            </ul>
-          </div>
-          <div className="demo-title" enter-data={{type:'alpha',queueId:1,delay:this.state.delay}}>我是标题</div>
-          <div className="demo-listBox">
-            <div className="demo-list">
-              <div className="title" enter-data={{type:'bottom',queueId:1}}></div>
+        <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={{type:'bottom',queueId:1}}></li>
-                <li enter-data={{type:'bottom',queueId:1}}></li>
-                <li enter-data={{type:'bottom',queueId:1}}></li>
-                <li enter-data={{type:'bottom',queueId:1}}></li>
-                <li enter-data={{type:'bottom',queueId:1}}></li>
+                <li enter-data></li>
+                <li enter-data></li>
+                <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>
+                <ul>
+                  <li enter-data={{type: 'bottom', queueId: 1}}></li>
+                  <li enter-data={{type: 'bottom', queueId: 1}}></li>
+                  <li enter-data={{type: 'bottom', queueId: 1}}></li>
+                </ul>
+              </div>
+            </div>
           </div>
-        </div>
-        <div className="demo-footer" enter-data={{type:'bottom',queueId:1}}></div>
-      </EnterAnimation>
-    </div>
+        </div> : null}
+        </EnterAnimation>
+      </div>
     )
   }
 });
@@ -96,9 +70,8 @@ React.render(<Test />
 
 <style>
 #components-enter-animation-demo-enter-data {
-  width: 600px;
   text-align: center;
   overflow: hidden;
-  margin: 20px auto;
+  margin: 18px auto;
 }
 </style>

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

@@ -0,0 +1,101 @@
+# 配置进出场的样式
+
+- order: 1
+
+配置进出场动画样式。
+
+
+---
+
+````jsx
+var EnterAnimation = antd.EnterAnimation;
+
+var Test = React.createClass({
+  getInitialState() {
+    return {
+      enter:{
+        type: 'right',
+        interval: 0.3,
+        callback:() => {
+          console.log('enter');
+        }
+      },
+      leave:{
+        type: 'left',
+        interval: .1,
+        callback:() => {
+          console.log('leave');
+        }
+      },
+      show:true,
+    }
+  },
+  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">
+              <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>
+                  <li></li>
+                  <li></li>
+                </ul>
+              </div>
+              <div className="demo-title">我是标题</div>
+              <div className="demo-listBox">
+                <div className="demo-list">
+                  <div className="title"></div>
+                  <ul>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div className="demo-footer"></div>
+          </div> : null}
+        </EnterAnimation>
+      </div>
+    );
+  }
+});
+
+React.render(<Test />
+, document.getElementById('components-enter-animation-demo-enter-leave'));
+````
+
+<style>
+#components-enter-animation-demo-enter-leave {
+  text-align: center;
+  overflow: hidden;
+  margin: 20px auto;
+}
+</style>

components/enter-animation/demo/form.md

@@ -1,8 +1,8 @@
-# 表单动画进场
+# 表单动画进出场
 
-- order: 2
+- order: 4
 
-表单组全合的进场与出场动画。
+表单组合的进场与出场动画。
 
 ---
 
@@ -15,85 +15,81 @@ var Radio = antd.Radio;
 var RadioGroup = antd.Radio.Group;
 
 var Test = React.createClass({
-  getInitialState(){
+  getInitialState() {
     return {
-      direction:'enter',
-      upend:false,
-      type:'right',
-      interval:0.1,
-      callback:null
+      enter: {
+        type: 'right',
+        callback: null,
+        interval: 0.1
+      },
+      leave: {
+        type: 'left',
+        reverse: true,
+        interval: 0.05,
+        callback: ()=> {
+          console.log('出场结束')
+        }
+      },
+      show: true
     }
   },
-  onEnter(){
+  onClick() {
     this.setState({
-      direction:'enter',
-      upend:false,
-      type:'right',
-      callback:null
-    })
-  },
-  onLeave(){
-    this.setState({
-      direction:'leave',
-      upend:true,
-      type:'bottom',
-      callback:function (){
-        console.log('出场结束');
-      }
+      show: !this.state.show
     })
   },
   render() {
     return (
-    <div>
-      <div style={{marginBottom:20,textAlign:'center'}}>
-        <button className="ant-btn ant-btn-primary" onClick={this.onEnter}>进场</button>
-        <button className="ant-btn ant-btn-primary" style={{marginLeft:20}} onClick={this.onLeave}>出场</button>
+      <div>
+        <div style={{marginBottom: 20, textAlign: 'center'}}>
+          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
+        </div>
+        <EnterAnimation enter={this.state.enter} leave={this.state.leave} component='form' className="ant-form-horizontal">
+          {this.state.show ? <div key='from'>
+            <div className="ant-form-item ant-form-item-compact">
+              <label htmlFor="userName" className="col-6" required>用户名：</label>
+              <div className="col-6">
+                <p className="ant-form-text">大眼萌 minion</p>
+              </div>
+            </div>
+            <div className="ant-form-item">
+              <label htmlFor="password" className="col-6" required>密码：</label>
+              <div className="col-14">
+                <input className="ant-input" type="password" id="password" placeholder="请输入密码"/>
+              </div>
+            </div>
+            <div className="ant-form-item ant-form-item-compact">
+              <label  className="col-6" required>您的性别：</label>
+              <div className="col-14">
+                <RadioGroup value="male">
+                  <Radio value="male">男的</Radio>
+                  <Radio value="female">女的</Radio>
+                </RadioGroup>
+              </div>
+            </div>
+            <div className="ant-form-item">
+              <label htmlFor="remark" className="col-6" required>备注：</label>
+              <div className="col-14">
+                <textarea className="ant-input" id="remark" placeholder="随便写"></textarea>
+                <p className="ant-form-explain">随便写点什么</p>
+              </div>
+            </div>
+            <div className="ant-form-item ant-form-item-compact">
+              <div className="col-14 col-offset-6">
+                <label>
+                  <Checkbox />
+                  同意
+                </label>
+              </div>
+            </div>
+            <div className="row">
+              <div className="col-16 col-offset-6">
+                <input type="submit" className="ant-btn ant-btn-primary" value="确 定" />
+              </div>
+            </div>
+          </div> : null}
+        </EnterAnimation>
       </div>
-        <form className="ant-form-horizontal">
-         <EnterAnimation interval={this.state.interval} type={this.state.type} upend={this.state.upend} direction={this.state.direction} callback={this.state.callback}>
-           <div className="ant-form-item ant-form-item-compact">
-               <label htmlFor="userName" className="col-6" required>用户名：</label>
-               <div className="col-6">
-                 <p className="ant-form-text">大眼萌 minion</p>
-               </div>
-             </div>
-             <div className="ant-form-item">
-               <label htmlFor="password" className="col-6" required>密码：</label>
-               <div className="col-14">
-                 <input className="ant-input" type="password" id="password" placeholder="请输入密码"/>
-               </div>
-             </div>
-             <div className="ant-form-item ant-form-item-compact">
-               <label  className="col-6" required>您的性别：</label>
-               <div className="col-14">
-                 <RadioGroup value="male">
-                   <Radio value="male">男的</Radio>
-                   <Radio value="female">女的</Radio>
-                 </RadioGroup>
-               </div>
-             </div>
-             <div className="ant-form-item">
-               <label htmlFor="remark" className="col-6" required>备注：</label>
-               <div className="col-14">
-                 <textarea className="ant-input" id="remark" placeholder="随便写"></textarea>
-                 <p className="ant-form-explain">随便写点什么</p>
-               </div>
-             </div>
-             <div className="ant-form-item ant-form-item-compact">
-               <div className="col-14 col-offset-6">
-                 <label>
-                   <Checkbox /> 同意
-                 </label>
-               </div>
-             </div>
-             <div className="row">
-               <div className="col-16 col-offset-6">
-                 <input type="submit" className="ant-btn ant-btn-primary" value="确 定" />
-               </div>
-             </div>
-         </EnterAnimation>
-       </form>
-    </div>
     )
   }
 });
@@ -102,11 +98,3 @@ React.render(<Test />
 , document.getElementById('components-enter-animation-demo-form'));
 ````
 
-<style>
-#components-enter-animation-demo-enter-data {
-  width: 600px;
-  text-align: center;
-  overflow: hidden;
-  margin: 20px auto;
-}
-</style>

components/enter-animation/demo/router.md

@@ -0,0 +1,97 @@
+# Router 默认进出场
+
+- order: 5
+
+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;
+var EnterAnimation = antd.EnterAnimation;
+var Menu = antd.Menu;
+
+var App = React.createClass({
+  getInitialState: function () {
+    return {};
+  },
+  clickPage() {
+    this.setState({
+      enter: {delay: 0.3},
+      leave: {delay: 0}
+    });
+  },
+  render() {
+    var key = this.props.location.pathname;
+    return (
+      <div>
+        <Menu style={{marginBottom: 20}} mode="horizontal">
+          <Menu.Item key='page1'>
+            <Link to="/page1" onClick={this.clickPage}>Page 1</Link>
+          </Menu.Item>
+          <Menu.Item key='page2'>
+            <Link to="/page2" onClick={this.clickPage}>Page 2</Link>
+          </Menu.Item>
+        </Menu>
+        <EnterAnimation className='demo-router-wap' enter={this.state.enter} leave={this.state.leave}>
+            {React.cloneElement(this.props.children || <div key='home' className='demo-router-child'><h1>Home</h1><div>这是首页</div></div>, {key: key})}
+        </EnterAnimation>
+      </div>
+    );
+  }
+});
+var Page1 = React.createClass({
+  render() {
+    return (
+      <div className="demo-router-child">
+        <h1>Page 1</h1>
+        <p><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
+        <p><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
+        <p><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
+        <p><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
+        <p><Link to="/page2">A link to page 2 should be active</Link>改变样式</p>
+      </div>
+    );
+  }
+});
+var Page2 = React.createClass({
+  render() {
+    return (
+      <div className="demo-router-child">
+        <h1>Page 2</h1>
+        <p><Link to="/page1">a link to page 1 </Link>我是页面2.</p>
+        <p><Link to="/page1">a link to page 1 </Link>我是页面2.</p>
+        <p><Link to="/page1">a link to page 1 </Link>我是页面2.</p>
+        <p><Link to="/page1">a link to page 1 </Link>我是页面2.</p>
+      </div>
+    );
+  }
+});
+React.render((
+  <Router history={history}>
+    <Route path="/" component={App} ignoreScrollBehavior>
+      <Route path="page1" component={Page1} />
+      <Route path="page2" component={Page2} />
+    </Route>
+  </Router>
+), document.getElementById('components-enter-animation-demo-router'));
+````
+
+<style>
+#components-enter-animation-demo-router {
+  text-align: center;
+}
+.demo-router-wap{
+  position: relative;
+  transition: height .5s;
+  width: 300px;
+  margin: auto;
+}
+.demo-router-child{
+  text-align:left;
+}
+</style>

components/enter-animation/demo/style.md

@@ -0,0 +1,80 @@
+# style 自定义样式动画进出场
+
+- order: 3
+
+通过加上属性里的 `style` 来自定义 CSS 动画进出场。
+
+
+---
+
+````jsx
+var EnterAnimation = antd.EnterAnimation;
+
+var Test = React.createClass({
+  getInitialState() {
+    return {
+      enter: {
+        style: {
+          transform: "translateX(50px)",
+          opacity: 0
+        },
+        interval: .1,
+      },
+      leave: {
+        interval: 0.03
+      },
+      show: true
+    }
+  },
+  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='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>
+                <li enter-data></li>
+                <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>
+                <ul>
+                  <li enter-data={{style: {transform: 'translateY(30px)', opacity: 0}, queueId: 1}}></li>
+                  <li enter-data={{style: {transform: 'translateY(30px)', opacity: 0}, queueId: 1}}></li>
+                  <li enter-data={{style: {transform: 'translateY(30px)', opacity: 0}, queueId: 1}}></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div> : null}
+        </EnterAnimation>
+      </div>
+    )
+  }
+});
+
+React.render(<Test />
+, document.getElementById('components-enter-animation-demo-style'));
+````
+
+<style>
+#components-enter-animation-demo-style {
+  text-align: center;
+  overflow: hidden;
+  margin: 18px auto;
+}
+</style>

components/enter-animation/index.jsx

@@ -9,3 +9,4 @@ class AntEnterAnimation extends React.Component {
 
 AntEnterAnimation.to = EnterAnimation.to;
 export default AntEnterAnimation;
+

components/enter-animation/index.md

@@ -2,7 +2,7 @@
 
 - category: Components
 - chinese: 进场动画
-- cols: 1
+
 
 ---
 
@@ -28,7 +28,7 @@
 </EnterAnimation>
 ```
 
-如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历dom下一级节点来执行动画。
+如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历 dom 下一级节点来执行动画。
 
 ```html
 <EnterAnimation type="left" delay={2}>
@@ -43,6 +43,18 @@
 </EnterAnimation>
 ```
 
+router 使用方法:
+
+```html
+<EnterAnimation enter={type:'left'} leave={type:'right'}>
+  {cloneElement(this.props.children || <div/>, {key: 'demo1'})}
+  //或者直接标签
+  <div key='demo2'>
+    <div>依次进场</div>
+    <div>依次进场</div>
+  </div>
+</EnterAnimation>
+```
 
 ## API
 
@@ -50,32 +62,46 @@
 
 |参数             |类型    |默认值        |详细                                                 |
 |-----------------|-------|-------------|----------------------------------------------------|
-|type             |string |`right`  |执行动画的内置参数  |
-|eStyle           |string |null   |同上， style 的样式动画, `type` 有值，此项无效|
-|direction        |string |`enter`|动画进场或出场样式,以 `enter` `leave` 两值|
-|duration         |number |0.5    |每个动画的时间|
+|enter|object| `{type:'right'}` |管理进场数据|
+|leave|object| null |管理当前元素出场的数据, null 时继承 enter 里的所有标签的值 |
+|component|string| `div` | EnterAnimation 替换的标签名|
+
+### enter = {} | leave = {}
+
+|参数             |类型    |默认值        |详细                                                 |
+|-----------------|-------|-------------|----------------------------------------------------|
+|type             |string |`right`  |内置动画样式：<br/> `alpha` `left` `right` `top` `bottom` `scale` `scaleBig` `scaleX` `scaleY`  |
+|style           |object / string |null   |同上， style 的样式动画, `type` 有值，此项无效。<br/>如 `{transform:'translateX(100px)'}` 或 `'transform: translateX(100px)'`|
+|duration         |number |0.5    |每个动画的时间,以秒为单位|
 |ease             |string|`cubic-bezier(0.165, 0.84, 0.44, 1);`|样式缓动,只支持 css 样式缓动;|
 |delay            |number |0      |整个区块的延时，以秒为单位|
-|upend            |boolean|false  |是否倒放,从最后一个dom开始往上播放|
+|reverse          |boolean|false  |是否倒放,从最后一个 dom 开始往上播放|
 |interval         |number |0.1    |递增延时值，以秒为单位|
 |callback         |function|null  |动画结束回调|
 
-### enter-data
+### 一级标签key：
+
+|参数             |类型    |详细                                                 |
+|-----------------|-------|----------------------------------------------------|
+|key|string|必需，控制进出场；|
+
+### 子标签
 
 |参数             |类型    |默认值      |详细                                                 |
 |-----------------|-------|-----------|----------------------------------------------------|
-|enter-data       |object | `right`     |子标签动画参数|
+|enter-data       |object | `{type:'right'}`     |子标签进场参数|
+|leave-data       |object | `enter-data` |子标签出场参数|
 
-#### enter-data={}
+
+#### enter-data = {}  | leave-data = {}
 
 |参数              |类型            |默认值           |详细                                                 |
 |-----------------|-----------------|----------------|----------------------------------------------------|
-|type             |string          |`right`           |内置动画样式：<br/> `alpha` `left` `right` `top` `bottom` `scale` `scaleBig` `scaleX` `scaleY`|
-|style            |string          |null            |动画样式，如 `transform: translateX(100px)`，`type` 有值此项无效|
-|direction        |string          |`enter`         |动画进出场方向：`enter` `leave`,覆盖标签里的值|
-|duration         |number          |0.5             |动画的时间,以秒为单位,覆盖标签里的值|
-|ease             |string          |`cubic-bezier(0.165, 0.84, 0.44, 1)`|样式缓动，只支持 css 样式缓动,覆盖标签里的值|
-|delay            |number          |0               |动画的延时，依照结构递增以上的 `interval`|
+|type             |string          |`right`           |同标签里的 `type`,覆盖标签里的值|
+|style            |object / string          |null            |同标签里的 `style`,覆盖标签里的值|
+|duration         |number          |0.5             |同标签里的 `duration`,覆盖标签里的值|
+|ease             |string          |`cubic-bezier(0.165, 0.84, 0.44, 1)`|同标签里的 `ease`,覆盖标签里的值|
+|delay            |number          |0               |当前动画的延时，依照结构递增以上的 `interval`|
 |queueId          |number          |0               |动画的线程|
 
 > 由于使用了 CSS3 动画，所以 `IE9` 及更早的版本将没有进场效果。

components/iconfont/index.md

@@ -3,6 +3,7 @@
 - category: Components
 - chinese: 字体图标
 - type: 基本
+- noinstant: true
 
 ---
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "0.9.0-beta8",
+  "version": "0.9.0-beta9",
   "stableVersion": "0.8.0",
   "title": "Ant Design",
   "description": "一个 UI 设计语言",
@@ -33,7 +33,7 @@
   "license": "MIT",
   "dependencies": {
     "css-animation": "~1.1.0",
-    "enter-animation": "~0.3.0",
+    "enter-animation": "~0.4.9",
     "gregorian-calendar": "~3.0.0",
     "gregorian-calendar-format": "~3.0.1",
     "object-assign": "~4.0.1",

scripts/demo.js

@@ -6,8 +6,8 @@ var antd = require('antd');
 var $ = require('jquery');
 var React = require('react');
 
-$(function () {
-// auto complete for components
+InstantClickChangeFns.push(function () {
+  // auto complete for components
   var Select = antd.Select;
   var Option = Select.Option;
   // 获取搜索数据

site/templates/aside.html

@@ -20,7 +20,9 @@
           <li class="type-divider">{{item.name}}</li>
           {%- else %}
           <li class="{%- if item.title === post.title %}current{%- endif %}">
-            <a href="{{permalink_url(item)}}" class="{%- if item.meta.disabled %}nav-link-disabled{%- endif %}">
+            <a href="{{permalink_url(item)}}"
+               class="{%- if item.meta.disabled %}nav-link-disabled{%- endif %}"
+               {%- if item.meta.noinstant %}data-no-instant{%- endif %}>
               {{item.title}}
               <span class="chinese">{{item.meta.chinese}}</span>
             </a>

site/templates/layout.html

@@ -36,6 +36,7 @@
     <script src="https://a.alipayobjects.com/??bluebird/2.9.30/bluebird.js,jquery/jquery/1.11.1/jquery.js,es5-shim/4.1.10/es5-shim.js,es5-shim/4.1.10/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.js"></script>
     <script>
       var ANT_COMPONENTS = [];
+      var InstantClickChangeFns = [];
       {%- for item in resource.pages|find_category(["CSS","Components"]) %}
       ANT_COMPONENTS.push({
         title: '{{item.title}}',
@@ -90,7 +91,7 @@
         <span class="bar"></span>
         <ul>
           <li class="{%- if post.meta.filepath === 'README.md' %}current{%- endif %}">
-            <a href="/">首页</a>
+            <a href="/" data-no-instant>首页</a>
           </li>
           <li class="{%- if post.directory|rootDirectoryIn(['spec']) %}current{%- endif %}">
             <a href="/spec/introduce">设计</a>
@@ -112,5 +113,14 @@
       {% block aside %}{% endblock %} {% block content %}{% endblock %}
     </div>
     {%- include "footer.html" %}
+    <script src="https://t.alipayobjects.com/images/rmsweb/T1AmXhXg0kXXXXXXXX.js" data-no-instant></script>
+    <script data-no-instant>
+      InstantClick.on('change', function() {
+        InstantClickChangeFns.forEach(function(fn) {
+          fn();
+        });
+      });
+      InstantClick.init();
+    </script>
   </body>
 </html>

spec/page-transition.md

@@ -2,6 +2,7 @@
 
 - category: 动画
 - order: 1
+- noinstant: true
 
 ---
 

static/motionDemo.js

@@ -1,111 +0,0 @@
-/**
- * Created by jljsj on 15/6/30.
- */
-$(function (){
-    var animBtnDome={
-        animStr:'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
-        init:function() {
-            var self=this;
-            self.body=$("body");
-            self.btn=$(".ant-btn-ripple");
-            //$(".ant-btn-lq").bind("click",function (le){
-            //    le.stopPropagation();
-            //});
-
-            //涟漪效果
-            self.btn.bind("mousedown",function (e){
-                //console.log(e)
-                //var _x= e.offsetX,_y= e.offsetY;
-                var __x=$(this).offset().left,__y=$(this).offset().top,
-                    _x= e.pageX-__x,_y= e.pageY-__y;
-                var lq=$("<em class='ant-btn-lq'></em>").prependTo(this);
-                var _w=this.offsetWidth,_h=this.offsetHeight;
-                lq.removeAttr("style").css({width:_w,height:_w,"border-radius":_w/2,left:_x-_w/2,top:_y-_w/2});
-                if($(this).attr("class").indexOf("ant-btn-primary")>=0||$(this).attr("class").indexOf("ant-btn-ghost")>=0){
-                    lq.css("background-color","#fff");
-                }else{
-                    lq.css("background-color","#999");
-                }
-                var s=0;
-                //if(_h>=_w){
-                //    s=_y/_h*2<1?2-_y/_h*2:_y/_h*2;
-                //}
-
-                var _sx=_x/_w* 2,_sy=_y/_h*2;
-                if(_sx>1&&_sy>1){
-                    s=_sx>_sy?_sx:_sy;
-                }else if(_sx>1||_sy>1){
-                    _sx=_sx<1?2-_sx:_sx;
-                    _sy=_sy<1?2-_sy:_sy;
-                    s=_sx>_sy?_sx:_sy;
-                }else {
-                    s=2-_sx>2-_sy?2-_sx:2-_sy;
-                }
-                s=s+.3;
-                lq.css("transform","scale("+s+")")
-
-            });
-            function mousee_up(e){
-                var lq=$(this).find(".ant-btn-lq");
-                lq.delay(300).animate({opacity:0},300,function (){
-                    lq.remove();
-                })
-            }
-            self.btn.bind("mouseout",mousee_up);
-            self.btn.bind("mouseup",mousee_up);
-
-            //加载按钮
-            self.loadBtn=$(".ant-btn-load");
-            self.loadBtn.bind("click",function (e){
-                var m=$(this);
-                m.find("text").css({"opacity":"0","transform": "scale(2)"});
-                m.find("span").css({"opacity":1,"transform": "scale(1)"});
-                setTimeout(function (){
-                    m.find("text").removeAttr("style");
-                    m.find("span").removeAttr("style")
-                },4000)
-            });
-
-            //替换
-            function reqClass(m,_class,call){
-                if(m.attr("class").indexOf(_class+"-open")>=0){
-                    m.removeClass(_class+"-open").addClass(_class+"-close").one(self.animStr,function (){
-                        m.removeClass(_class+"-close");
-                        if(typeof call=="function"){
-                            call()
-                        }
-                    })
-                }else{
-                    m.addClass(_class+"-open");
-                }
-            }
-
-            //icon的下拉演示
-            self.listTip=$(".ant-btn-listtip");
-            self.listTip.bind("click",function (e){
-                var m=$(this);
-                var tip=$("#"+m.attr("data-id"));
-                reqClass(tip,"scale");
-
-                tip.css({left: m.position().left-tip.width()+ m.outerWidth()-2,top: m.position().top+m.outerHeight()+12})
-            });
-
-            //dropdown演示的事件
-            self.dropdown=$(".ant-dropdown-wrap");
-            self.dropdown.find(".ant-btn-menu").bind("click",function (e){
-                var m=$(this),p= m.parent(),d= p.find(".ant-dropdown"),
-                    con= d.find(".ant-dropdown-con"),str="margin-top";
-                d.css({"display":"block","margin-top":2});
-                reqClass(con,str,function (){
-                    if(con.attr("class").indexOf('margin-top')<0){
-                        d.css({"display":"none"})
-                    }
-
-                });
-
-            })
-        }
-    };
-    animBtnDome.init()
-
-});

static/script.js

@@ -1,4 +1,4 @@
-$(function() {
+InstantClickChangeFns.push(function() {
   $('.component-demos .icon-all').on('click', function() {
     if ($(this).hasClass('expand')) {
       $(this).removeClass('expand');
@@ -142,7 +142,6 @@ $(function() {
           list.css({"display":"block","margin-top":-list.height()});
           list.animate({marginTop:0},400,"easeInOutCirc")
         }
-        //parent.find("ul").slideToggle(300);
       });
     }
   };