From d415ed456120c423460f332fe2a0cdb22afa1546 Mon Sep 17 00:00:00 2001
From: jljsj <liangjun.jiang@alipay.com>
Date: Thu, 10 Sep 2015 11:21:23 +0800
Subject: [PATCH] update enterAnimation demo

---
 components/enter-animation/demo/basic.md      |  1 -
 components/enter-animation/demo/enter-data.md |  1 -
 .../enter-animation/demo/router-data.md       | 95 +++++++++++++++++++
 components/enter-animation/demo/router.md     | 58 ++++-------
 components/enter-animation/index.md           |  2 +-
 5 files changed, 112 insertions(+), 45 deletions(-)
 create mode 100644 components/enter-animation/demo/router-data.md

diff --git a/components/enter-animation/demo/basic.md b/components/enter-animation/demo/basic.md
index 26a28d3c7a..04d36170bc 100644
--- a/components/enter-animation/demo/basic.md
+++ b/components/enter-animation/demo/basic.md
@@ -94,7 +94,6 @@ React.render(<Test />
 
 <style>
 #components-enter-animation-demo-basic {
-  width: 600px;
   text-align: center;
   overflow: hidden;
   margin: 20px auto;
diff --git a/components/enter-animation/demo/enter-data.md b/components/enter-animation/demo/enter-data.md
index 4369e90197..d1f78a0a92 100644
--- a/components/enter-animation/demo/enter-data.md
+++ b/components/enter-animation/demo/enter-data.md
@@ -86,7 +86,6 @@ React.render(<Test />
 
 <style>
 #components-enter-animation-demo-enter-data {
-  width: 600px;
   text-align: center;
   overflow: hidden;
   margin: 20px auto;
diff --git a/components/enter-animation/demo/router-data.md b/components/enter-animation/demo/router-data.md
new file mode 100644
index 0000000000..58da4039aa
--- /dev/null
+++ b/components/enter-animation/demo/router-data.md
@@ -0,0 +1,95 @@
+# Router数据控制
+
+- order: 4
+
+router的data-enter和data-leave控制进出场动画。
+
+---
+
+````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 App = React.createClass({
+  getInitialState: function () {
+      return {};
+    },
+    clickPage() {
+      this.setState({
+        enter: {interval: 0.05,type: 'bottom',ease: 'cubic-bezier(0.075, 0.82, 0.165, 1)',delay:0.3,},
+        leave: {upend: true,duration:0.2,ease: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',delay:0}//interval与type不重写将继承enter里的数据
+      })
+    },
+    render() {
+      var key = this.props.location.pathname;
+      return (
+        <div>
+          <div style={{marginBottom:20}}>
+            <Link to="/page1" onClick={this.clickPage} className="ant-btn ant-btn-primary">Page 1</Link>
+            <Link to="/page2" onClick={this.clickPage} className="ant-btn ant-btn-primary" style={{marginLeft:10}}>Page 2</Link>
+          </div>
+          <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() {
+    var enterData = {};
+    return (
+      <div className="demo-router-child">
+        <h1 data-enter>Page 1</h1>
+        <p data-enter><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
+        <p data-enter><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
+        <p data-enter><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
+        <p data-enter><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
+        <p data-enter='{"type":"right"}' data-leave='{"type":"left"}'><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-data'));
+````
+
+<style>
+#components-enter-animation-demo-router-data {
+  text-align: center;
+  margin: 20px auto;
+}
+.demo-router-wap{
+  position: relative;
+  transition: height .5s;
+  width: 300px;
+  margin: auto;
+}
+.demo-router-child{
+  text-align:left;
+}
+</style>
diff --git a/components/enter-animation/demo/router.md b/components/enter-animation/demo/router.md
index 4ded398ff8..71e74eb9dc 100644
--- a/components/enter-animation/demo/router.md
+++ b/components/enter-animation/demo/router.md
@@ -1,6 +1,6 @@
-# Router动画进出场
+# Router默认进出场
 
-- order: 2
+- order: 3
 
 router组合的进场与出场动画。
 
@@ -15,43 +15,22 @@ var Link = ReactRouter.Link;
 var EnterAnimation = antd.EnterAnimation;
 
 var App = React.createClass({
-  getInitialState: function () {
-      return {
-        enter: {
-          type: 'bottom',
-          interval: 0.1,
-          delay: 0,
-          callback: function (e) {
-            console.log('我进场了', e.ReactElement.key)
-          },
-          ease: null
-        },
-        leave: null
-      };
+    getInitialState: function () {
+      return {};
     },
-    clickPage1() {
+    clickPage() {
       this.setState({
-        enter: {interval: 0.03,type: 'right',ease: 'cubic-bezier(0.075, 0.82, 0.165, 1)',delay:0.3,
-          callback: function (e) {
-            console.log('你点了page1', 'key:'+e.ReactElement.key, e.direction);
-          }
-        },
-        leave: {type: 'left',upend: true,interval:0.05,duration:0.2,ease: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',delay:0}
-      })
-    },
-    clickPage2() {
-      this.setState({
-        enter: {interval: 0.03,type: 'bottom',ease: null,delay:.3,callback: function (e) {console.log('你点了page2', 'key:'+e.ReactElement.key, e.direction);}},
-        leave: {delay:0,type:'top'}
-      })
+        enter: {delay:0.3},
+        leave: {delay:0}
+      });
     },
     render() {
       var key = this.props.location.pathname;
       return (
         <div>
           <div style={{marginBottom:20}}>
-            <Link to="/page1" onClick={this.clickPage1} className="ant-btn ant-btn-primary" style={{marginLeft:10}}>Page 1</Link>
-            <Link to="/page2" onClick={this.clickPage2} className="ant-btn ant-btn-primary" style={{marginLeft:10}}>Page 2</Link>
+            <Link to="/page1" onClick={this.clickPage} className="ant-btn ant-btn-primary">Page 1</Link>
+            <Link to="/page2" onClick={this.clickPage} className="ant-btn ant-btn-primary" style={{marginLeft:10}}>Page 2</Link>
           </div>
           <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})}
@@ -60,23 +39,20 @@ var App = React.createClass({
       );
     }
 });
-
 var Page1 = React.createClass({
   render() {
-    var enterData = {};
     return (
       <div className="demo-router-child">
-        <h1 data-enter>Page 1</h1>
-        <p data-enter><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
-        <p data-enter><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
-        <p data-enter><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
-        <p data-enter><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
-        <p data-enter='{"type":"bottom"}' data-leave='{"type":"left"}'><Link to="/page2">A link to page 2 should be active</Link>改变样式</p>
+        <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 (
@@ -90,7 +66,6 @@ var Page2 = React.createClass({
     );
   }
 });
-
 React.render((
   <Router history={history}>
     <Route path="/" component={App} ignoreScrollBehavior>
@@ -103,7 +78,6 @@ React.render((
 
 <style>
 #components-enter-animation-demo-router {
-  width: 600px;
   text-align: center;
   margin: 20px auto;
 }
diff --git a/components/enter-animation/index.md b/components/enter-animation/index.md
index 9b7daaf2dc..8bf8a5d546 100644
--- a/components/enter-animation/index.md
+++ b/components/enter-animation/index.md
@@ -2,7 +2,7 @@
 
 - category: Components
 - chinese: 进场动画
-- cols: 1
+
 
 ---