update enterAnimation style is object and string

components/enter-animation/demo/basic.md

@@ -2,7 +2,7 @@
 
 - order: 0
 
-默认子节点进场动画。为避免与本站页面的进场冲突，所以 `EnterAnimation` 里延时 1 秒，递增 `interval` 为 0.3。
+默认子节点进场动画。
 
 
 ---

components/enter-animation/demo/form.md

@@ -1,6 +1,6 @@
 # 表单动画进出场
 
-- order: 2
+- order: 3
 
 表单组合的进场与出场动画。
 

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

@@ -1,6 +1,6 @@
 # Router数据控制
 
-- order: 4
+- order: 5
 
 router的data-enter和data-leave控制进出场动画。
 

components/enter-animation/demo/router.md

@@ -1,6 +1,6 @@
 # Router默认进出场
 
-- order: 3
+- order: 4
 
 router组合的进场与出场动画。
 

components/enter-animation/demo/style.md

@@ -0,0 +1,80 @@
+# style自定义样式动画进出场
+
+- order: 2
+
+通过加上属性里的 `style` 来自定义 CSS 动画进出场,为了对齐去掉了 demo 里的一些元素。
+
+
+---
+
+````jsx
+var EnterAnimation = antd.EnterAnimation;
+
+var Test = React.createClass({
+  getInitialState(){
+    return {
+      enter:{
+        style:{
+          transform:"translateX(50px)",
+          opacity:0
+        },
+        interval:.1,
+      },
+      leave:{
+        interval:0.03
+      },
+      bool:true
+    }
+  },
+  onClick(){
+    this.setState({
+      bool:!this.state.bool
+    })
+  },
+  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.bool ? <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.md

@@ -71,7 +71,7 @@ router使用方法:
 |参数             |类型    |默认值        |详细                                                 |
 |-----------------|-------|-------------|----------------------------------------------------|
 |type             |string |`right`  |执行动画的内置参数  |
-|style           |string |null   |同上， style 的样式动画, `type` 有值，此项无效|
+|style           |object / string |null   |同上， style 的样式动画, `type` 有值，此项无效|
 |duration         |number |0.5    |每个动画的时间|
 |ease             |string|`cubic-bezier(0.165, 0.84, 0.44, 1);`|样式缓动,只支持 css 样式缓动;|
 |delay            |number |0      |整个区块的延时，以秒为单位|
@@ -99,7 +99,7 @@ router使用方法:
 |参数              |类型            |默认值           |详细                                                 |
 |-----------------|-----------------|----------------|----------------------------------------------------|
 |type             |string          |`right`           |内置动画样式：<br/> `alpha` `left` `right` `top` `bottom` `scale` `scaleBig` `scaleX` `scaleY`|
-|style            |string          |null            |动画样式，如 `transform: translateX(100px)`，`type` 有值此项无效|
+|style            |object / string          |null            |动画样式，如 `transform: translateX(100px)`，`type` 有值此项无效|
 |duration         |number          |0.5             |动画的时间,以秒为单位,覆盖标签里的值|
 |ease             |string          |`cubic-bezier(0.165, 0.84, 0.44, 1)`|样式缓动，只支持 css 样式缓动,覆盖标签里的值|
 |delay            |number          |0               |动画的延时，依照结构递增以上的 `interval`|

package.json

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