更新enterAnimation版本与demo

components/enter-animation/demo/basic.md

@@ -4,7 +4,6 @@
 
 默认子节点进场动画。为避免与本站页面的进场冲突，所以 `EnterAnimation` 里延时 1 秒，递增 `interval` 为 0.3。
 
-刷新页面看效果。
 
 ---
 
@@ -12,47 +11,77 @@
 var EnterAnimation = antd.EnterAnimation;
 
 var Test = React.createClass({
+  getInitialState(){
+    return {
+      direction:'enter',
+      upend:false,
+      type:'right',
+      interval:0.3
+    }
+  },
+  onEnter(){
+    this.setState({
+      direction:'enter',
+      upend:false,
+      type:'right',
+      interval:0.3
+    })
+  },
+  onLeave(){
+    this.setState({
+      direction:'leave',
+      upend:false,
+      type:'left',
+      interval:.1
+    })
+  },
   render() {
     return (
-      <EnterAnimation delay={1} interval={0.3}>
-        <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 style={{'margin-bottom':20}}>
+          <button className="ant-btn ant-btn-primary" onClick={this.onEnter}>进场</button>
+          <button className="ant-btn ant-btn-primary" style={{'margin-left':20}} onClick={this.onLeave}>出场</button>
         </div>
-        <div className="demo-content" enter-data>
-          <div className="demo-title">我是标题</div>
-          <div className="demo-kp">
+        <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-title">我是标题</div>
-          <div className="demo-listBox">
-            <div className="demo-list">
-              <div className="title"></div>
+          <div className="demo-content" enter-data>
+            <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>
-      </EnterAnimation>
+          <div className="demo-footer" enter-data></div>
+        </EnterAnimation>
+      </div>
     );
   }
 });

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

@@ -4,7 +4,6 @@
 
 通过加上 `enter-data` 属性来指定需要动画进场的元素，并且可以定义每个元素的动画效果，用到的参数有 `type` `queueId` `delay`。
 
-刷新页面看效果。
 
 ---
 
@@ -12,9 +11,42 @@
 var EnterAnimation = antd.EnterAnimation;
 
 var Test = React.createClass({
+  getInitialState(){
+    return {
+      direction:'enter',
+      upend:false,
+      type:'right',
+      interval:0.1,
+      delay:0.7
+    }
+  },
+  onEnter(){
+    this.setState({
+      direction:'enter',
+      upend:false,
+      type:'right',
+      interval:0.05,
+      delay:0.7
+    })
+  },
+  onLeave(){
+    this.setState({
+      direction:'leave',
+      upend:false,
+      type:'right',
+      interval:.03,
+      delay:0.1
+    })
+
+  },
   render() {
     return (
-      <EnterAnimation delay={1} interval={0.2}>
+    <div>
+      <div style={{'margin-bottom':20}}>
+        <button className="ant-btn ant-btn-primary" onClick={this.onEnter}>进场</button>
+        <button className="ant-btn ant-btn-primary" style={{'margin-left':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"/>
@@ -37,7 +69,7 @@ var Test = React.createClass({
               <li enter-data></li>
             </ul>
           </div>
-          <div className="demo-title" enter-data={{type:'alpha',queueId:1,delay:1.6}}>我是标题</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>
@@ -53,6 +85,7 @@ var Test = React.createClass({
         </div>
         <div className="demo-footer" enter-data={{type:'bottom',queueId:1}}></div>
       </EnterAnimation>
+    </div>
     )
   }
 });

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

@@ -0,0 +1,112 @@
+# 表单动画进场
+
+- order: 2
+
+表单组全合的进场与出场动画。
+
+---
+
+````jsx
+var EnterAnimation = antd.EnterAnimation;
+var Select = antd.Select;
+var Option = Select.Option;
+var Checkbox = antd.Checkbox;
+var Radio = antd.Radio;
+var RadioGroup = antd.RadioGroup;
+
+var Test = React.createClass({
+  getInitialState(){
+    return {
+      direction:'enter',
+      upend:false,
+      type:'right',
+      interval:0.1,
+      callback:null
+    }
+  },
+  onEnter(){
+    this.setState({
+      direction:'enter',
+      upend:false,
+      type:'right',
+      callback:null
+    })
+  },
+  onLeave(){
+    this.setState({
+      direction:'leave',
+      upend:true,
+      type:'bottom',
+      callback:function (){
+        console.log('出场结束');
+      }
+    })
+  },
+  render() {
+    return (
+    <div>
+      <div style={{'margin-bottom':20,'text-align':'center'}}>
+        <button className="ant-btn ant-btn-primary" onClick={this.onEnter}>进场</button>
+        <button className="ant-btn ant-btn-primary" style={{'margin-left':20}} onClick={this.onLeave}>出场</button>
+      </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 for="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 for="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 for="password" className="col-6" required>备注：</label>
+               <div className="col-14">
+                 <textarea className="ant-input" 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>
+    )
+  }
+});
+
+React.render(<Test />
+, document.getElementById('components-enter-animation-demo-enter-from'));
+````
+
+<style>
+#components-enter-animation-demo-enter-data {
+  width: 600px;
+  text-align: center;
+  overflow: hidden;
+  margin: 20px auto;
+}
+</style>

components/enter-animation/index.md

@@ -55,10 +55,11 @@
 |eStyle           |string |null   |同上， style 的样式动画, `type` 有值，此项无效|
 |direction        |string |`enter`|动画进场或出场样式,以 `enter` `leave` 两值|
 |duration         |number |0.5    |每个动画的时间|
-|ease             |string|`cubic-bezier(0.165, 0.84, 0.44, 1);`|样式缓动;|
+|ease             |string|`cubic-bezier(0.165, 0.84, 0.44, 1);`|样式缓动,只支持 css 样式缓动;|
 |delay            |number |0      |整个区块的延时，以秒为单位|
 |upend            |boolean|false  |是否倒放,从最后一个dom开始往上播放|
 |interval         |number |0.1    |递增延时值，以秒为单位|
+|callback         |function|null  |动画结束回调|
 
 ### enter-data
 

package.json

@@ -33,7 +33,7 @@
   "license": "MIT",
   "dependencies": {
     "css-animation": "~1.1.0",
-    "enter-animation": "~0.2.5",
+    "enter-animation": "~0.3.0",
     "gregorian-calendar": "~3.0.0",
     "gregorian-calendar-format": "~3.0.1",
     "is-equal-shallow": "~0.1.3",