mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

updata enter-animation index.md

Browse Source
This commit is contained in:
jljsj 2015-09-11 11:12:30 +08:00
parent 10ad6e29be
commit 1fc30ef0c3
3 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/enter-animation/demo/router-data.md
View File

@ -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;

10
components/enter-animation/demo/router.md
View File

@ -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;

24
components/enter-animation/index.md
View File

@ -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` 及更早的版本将没有进场效果。