update enter-animation

components/enter-animation/demo/basic.md

@@ -11,75 +11,77 @@
 var EnterAnimation = antd.EnterAnimation;
 
 var Test = React.createClass({
-  getInitialState(){
+  getInitialState() {
     return {
-      direction:'enter',
-      upend:false,
-      type:'right',
-      interval:0.3
+      enter:{
+        type: 'right',
+        interval: 0.3,
+        callback:()=>{
+          console.log('enter');
+        }
+      },
+      leave:{
+        type: 'left',
+        interval: .1,
+        callback:()=>{
+          console.log('leave');
+        }
+      },
+      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 enter={this.state.enter} leave={this.state.leave}>
+          {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>
     );

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

@@ -2,7 +2,7 @@
 
 - order: 1
 
-通过加上 `enter-data` 属性来指定需要动画进场的元素，并且可以定义每个元素的动画效果，用到的参数有 `type` `queueId` `delay`。
+通过加上 `enter-data` 属性来指定需要动画进场的元素，并且可以定义每个元素的动画效果。
 
 
 ---
@@ -13,40 +13,29 @@ var EnterAnimation = antd.EnterAnimation;
 var Test = React.createClass({
   getInitialState(){
     return {
-      direction:'enter',
-      upend:false,
-      type:'right',
-      interval:0.1,
-      delay:0.7
+      enter:{
+        type:'right',
+        interval:.1,
+      },
+      leave:{
+        interval:0.03
+      },
+      bool:true
     }
   },
-  onEnter(){
+  onClick(){
     this.setState({
-      direction:'enter',
-      upend:false,
-      type:'right',
-      interval:0.05,
-      delay:0.7
+      bool:!this.state.bool
     })
   },
-  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>
+        <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}>
+      <EnterAnimation enter={this.state.enter} leave={this.state.leave}>
+        {this.state.bool ? <div key='enter-data'>
         <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"/>
@@ -69,7 +58,7 @@ var Test = React.createClass({
               <li enter-data></li>
             </ul>
           </div>
-          <div className="demo-title" enter-data={{type:'alpha',queueId:1,delay:this.state.delay}}>我是标题</div>
+          <div className="demo-title" enter-data={{type:'alpha',queueId:1,delay:0.7}}>我是标题</div>
           <div className="demo-listBox">
             <div className="demo-list">
               <div className="title" enter-data={{type:'bottom',queueId:1}}></div>
@@ -84,6 +73,7 @@ var Test = React.createClass({
           </div>
         </div>
         <div className="demo-footer" enter-data={{type:'bottom',queueId:1}}></div>
+        </div> : null}
       </EnterAnimation>
     </div>
     )

components/enter-animation/demo/form.md

@@ -17,83 +17,76 @@ var RadioGroup = antd.Radio.Group;
 var Test = React.createClass({
   getInitialState(){
     return {
-      direction:'enter',
-      upend:false,
-      type:'right',
-      interval:0.1,
-      callback:null
+      enter:{
+        type:'right',
+        callback:null,
+        interval:0.1
+      },
+      leave:{
+        type:'left',
+        upend:true,
+        interval:0.05,
+        callback:()=>{console.log('出场结束')}
+      },
+      bool: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('出场结束');
-      }
+      bool:!this.state.bool
     })
   },
   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.bool ? <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 +95,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,177 @@
+# 表单动画进场
+
+- order: 2
+
+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 App = React.createClass({
+  getInitialState: function () {
+      return {
+        enter: {
+          type: 'margin-top:10px;opacity:0',
+          interval: 0.1,
+          delay: 0,
+          callback: function (e) {
+            console.log('我进场了', e.ReactElement.key)
+          },
+          ease: null
+        },
+        leave: null
+      };
+    },
+    clickPage1() {
+      this.setState({
+        enter: {
+          interval: 0.03,
+          type: 'margin-top:10px;opacity:0',
+          ease: 'cubic-bezier(0.075, 0.82, 0.165, 1)',
+          delay:0.3,
+          callback: function (e) {
+            console.log('你点了page1,进场用的是你自定的效果', 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.000001,
+          callback: function (e) {
+            console.log('你点了page1,出场用的是你自定的效果', e.direction);
+            console.log('如果你在用了的参数，在出场没有设定，那么出场没设的将用回进场那设定的参数，如upend，从最后个开始')
+          }
+        }
+      })
+    },
+    clickPage2() {
+      this.setState({
+        enter: {
+          interval: 0.03,
+          type: 'top',
+          ease: null,
+          delay:.3,
+          callback: function (e) {
+            console.log('你点了page2,leave为null,出场进场同效果', e.direction)
+          }
+        },
+        leave: {
+          delay:0.00001
+        }
+      })
+    },
+    render() {
+      var key = this.props.location.pathname;
+      var height = 200;
+      switch (key) {
+        case '/page1':
+          height = 210;
+          break;
+        case '/page2':
+          height = 190;
+          break;
+        default :
+          height = 100;
+      }
+      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>
+          </div>
+          <EnterAnimation className='demo-router-wap' enter={this.state.enter} leave={this.state.leave}  ref='myChild' style={{height: height}}>
+            {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" ref='page1'>
+        <h1 data-enter='{"type":"right"}'>Page 1</h1>
+        <p data-enter='{"type":"top"}'>
+          <Link to="/page2">A link to page 1 should be active</Link>
+          我是页面1</p>
+        <p data-enter='{"type":"top"}'>
+          <Link to="/page2" data-enter='{"type":"bottom"}'>A link to page 1 should be active</Link>
+          我是页面1</p>
+        <p data-enter='{"type":"right"}'>
+          <Link to="/page2">A link to page 1 should be active</Link>
+          我是页面1</p>
+        <p data-enter='{"type":"left"}'>
+          <Link to="/page2">A link to page 1 should be active</Link>
+          我是页面1</p>
+        <p data-enter='{"duration":0.3}'>
+          <Link to="/page2">A link to page 1 should be active</Link>
+          我是页面1</p>
+      </div>
+    );
+  }
+});
+
+var Page2 = React.createClass({
+  render() {
+    return (
+      <div className="demo-router-child" ref='page2'>
+        <h1>Page 2</h1>
+        <p>
+          <Link to="/page1">a link to page 2 </Link>
+          我是页面2.</p>
+        <p>
+          <Link to="/page1">a link to page 2 </Link>
+          我是页面2.</p>
+        <p>
+          <Link to="/page1">a link to page 2 </Link>
+          我是页面2.</p>
+        <p>
+          <Link to="/page1">a link to page 2 </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 {
+  width: 600px;
+  text-align: center;
+  overflow: hidden;
+  margin: 20px auto;
+}
+.demo-router-wap{
+  position: relative;
+  transition: height .5s;
+  width: 300px;
+  margin: auto;
+}
+.demo-router-child{
+  position: absolute;
+}
+.demo-router-child h1{
+  margin:0;
+  text-align:left;
+}
+</style>

components/enter-animation/index.md

@@ -43,11 +43,31 @@
 </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
 
 ### <EnterAnimation />
 
+|参数             |类型    |默认值        |详细                                                 |
+|-----------------|-------|-------------|----------------------------------------------------|
+|enter|object| `right` |管理进场数据|
+|leave|object| `right` |管理当前元素出场的数据,默认null,null继承上面所有标签的值 |
+|component|string| `div` |EnterAnimation替换的标签名|
+
+### enter = {} | leave = {}
+
 |参数             |类型    |默认值        |详细                                                 |
 |-----------------|-------|-------------|----------------------------------------------------|
 |type             |string |`right`  |执行动画的内置参数  |
@@ -60,13 +80,20 @@
 |interval         |number |0.1    |递增延时值，以秒为单位|
 |callback         |function|null  |动画结束回调|
 
-### enter-data
+### 一级标签key：
+
+|参数             |类型    |详细                                                 |
+|-----------------|-------|----------------------------------------------------|
+|key|string|必需，控制进出场；|
+
+### enter-data | data-enter
 
 |参数             |类型    |默认值      |详细                                                 |
 |-----------------|-------|-----------|----------------------------------------------------|
 |enter-data       |object | `right`     |子标签动画参数|
+|data-enter       |JSON String|null     |router下enter-data无效，新增dom标签，router时createClass页面里可用;|
 
-#### enter-data={}
+#### enter-data = {} | data-enter=''
 
 |参数              |类型            |默认值           |详细                                                 |
 |-----------------|-----------------|----------------|----------------------------------------------------|

package.json

@@ -33,7 +33,7 @@
   "license": "MIT",
   "dependencies": {
     "css-animation": "~1.1.0",
-    "enter-animation": "~0.3.0",
+    "enter-animation": "~0.4.1",
     "gregorian-calendar": "~3.0.0",
     "gregorian-calendar-format": "~3.0.1",
     "object-assign": "~4.0.1",