updata enter-animation index.md

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

@@ -13,6 +13,7 @@ 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 () {
@@ -28,10 +29,10 @@ var App = React.createClass({
       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>
+          <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>
@@ -81,7 +82,6 @@ React.render((
 <style>
 #components-enter-animation-demo-router-data {
   text-align: center;
-  margin: 20px auto;
 }
 .demo-router-wap{
   position: relative;

components/enter-animation/demo/router.md

@@ -13,6 +13,7 @@ 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 () {
@@ -28,10 +29,10 @@ var App = React.createClass({
       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>
+          <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>
@@ -79,7 +80,6 @@ React.render((
 <style>
 #components-enter-animation-demo-router {
   text-align: center;
-  margin: 20px auto;
 }
 .demo-router-wap{
   position: relative;

components/enter-animation/index.md

@@ -70,9 +70,9 @@ router使用方法:
 
 |参数             |类型    |默认值        |详细                                                 |
 |-----------------|-------|-------------|----------------------------------------------------|
-|type             |string |`right`  |执行动画的内置参数  |
-|style           |object / string |null   |同上， style 的样式动画, `type` 有值，此项无效|
-|duration         |number |0.5    |每个动画的时间|
+|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开始往上播放|
@@ -90,19 +90,23 @@ router使用方法:
 |参数             |类型    |默认值      |详细                                                 |
 |-----------------|-------|-----------|----------------------------------------------------|
 |enter-data       |object | `right`     |子标签进场参数|
-|data-enter       |JSON String|null     |router下enter-data无效，新增dom标签，router时createClass页面里可用;|
+|data-enter       |JSON String| `right`     |router下enter-data无效，新增dom标签，router时createClass页面里可用;<br/> JSON String: `'{"type":"right","delay":0.1}'`|
 |leave-data       |object | `enter-data` |子标签出场参数|
-|data-leave       |JSON String|null      |同 `data-enter`|
+|data-leave       |JSON String| `data-leave`      |同 `data-enter`|
+
+> `enter-data` 和 `data-enter` 或 `leave-data` 和 `data-leave` 共存时，合并两对象，以 xxx-data 为主。
+
+> 比如 `enter-data` 里有 `type:'left'`， `data-enter` 也里有 `type:'right'`，取的是 `enter-data` 的 type。
 
 #### enter-data = {} | data-enter='{"type":"right"}' | leave-data={} | data-leave='{"type":"right"}'
 
 |参数              |类型            |默认值           |详细                                                 |
 |-----------------|-----------------|----------------|----------------------------------------------------|
-|type             |string          |`right`           |内置动画样式：<br/> `alpha` `left` `right` `top` `bottom` `scale` `scaleBig` `scaleX` `scaleY`|
-|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`|
+|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` 及更早的版本将没有进场效果。