mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-29 13:47:02 +08:00
Code Issues Actions 13 Packages Projects Releases Wiki Activity

Merge pull request #423 from ant-design/queue-anim

Browse Source 
Queue anim
This commit is contained in:
偏右 2015-10-23 22:42:54 +08:00
commit 7177a26f61
21 changed files with 559 additions and 655 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
components/enter-animation/demo/basic.md
View File

@ -1,67 +0,0 @@
# 进场和离场
- order: 1
自动。
---
````jsx
var EnterAnimation = antd.EnterAnimation;
var Button = antd.Button;
var Test = React.createClass({
getInitialState() {
return {
show: true
}
},
onClick() {
this.setState({
show: !this.state.show
})
},
render() {
return (
<div>
<div style={{marginBottom: 20}}>
<Button type="primary" onClick={this.onClick}>切换</Button>
</div>
<EnterAnimation>
{this.state.show ?
<div className="demo-content" key='a'>
<div className="demo-kp">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div className="demo-listBox">
<div className="demo-list">
<div className="title"></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div> : null}
</EnterAnimation>
</div>
);
}
});
ReactDOM.render(<Test />
, document.getElementById('components-enter-animation-demo-basic'));
````
<style>
#components-enter-animation-demo-basic {
text-align: center;
overflow: hidden;
margin: 20px auto;
}
</style>

77
components/enter-animation/demo/enter-data.md
View File

@ -1,77 +0,0 @@
# 指定节点动画进出场
- order: 3
通过加上 `enter-data` 属性来指定需要动画进场的元素，并且可以定义每个元素的动画效果。
---
````jsx
var EnterAnimation = antd.EnterAnimation;
var Button = antd.Button;
var Test = React.createClass({
getInitialState() {
return {
enter: {
type: 'right',
interval: .1,
},
leave: {
type:'left',
interval: 0.03
},
show: true
}
},
onClick() {
this.setState({
show: !this.state.show
})
},
render() {
return (
<div>
<div style={{marginBottom: 20}}>
<Button type="primary" onClick={this.onClick}>切换</Button>
</div>
<EnterAnimation enter={this.state.enter} leave={this.state.leave}>
{this.state.show ? <div key='enter-data'>
<div className="demo-content">
<div className="demo-kp">
<ul>
<li enter-data></li>
<li enter-data></li>
<li enter-data></li>
</ul>
</div>
<div className="demo-listBox">
<div className="demo-list">
<div className="title" enter-data={{type: 'bottom', queueId: 1}}></div>
<ul>
<li enter-data={{type: 'bottom', queueId: 1}}></li>
<li enter-data={{type: 'bottom', queueId: 1}}></li>
<li enter-data={{type: 'bottom', queueId: 1}}></li>
</ul>
</div>
</div>
</div>
</div> : null}
</EnterAnimation>
</div>
)
}
});
ReactDOM.render(<Test />
, document.getElementById('components-enter-animation-demo-enter-data'));
````
<style>
#components-enter-animation-demo-enter-data {
text-align: center;
overflow: hidden;
margin: 18px auto;
}
</style>

83
components/enter-animation/demo/enter-leave.md
View File

@ -1,83 +0,0 @@
# 配置进出场的样式
- order: 2
配置进出场动画样式。
---
````jsx
var EnterAnimation = antd.EnterAnimation;
var Button = antd.Button;
var Test = React.createClass({
getInitialState() {
return {
enter:{
type: 'right',
interval: 0.3,
callback:() => {
console.log('enter');
}
},
leave:{
type: 'left',
interval: .1,
callback:() => {
console.log('leave');
}
},
show:true,
}
},
onClick() {
this.setState({
show:!this.state.show,
})
},
render() {
return (
<div>
<div style={{marginBottom: 20}}>
<Button type="primary" onClick={this.onClick}>切换</Button>
</div>
<EnterAnimation enter={this.state.enter} leave={this.state.leave}>
{this.state.show ?
<div className="demo-content" key='demo'>
<div className="demo-kp">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div className="demo-listBox">
<div className="demo-list">
<div className="title"></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div> : null}
</EnterAnimation>
</div>
);
}
});
ReactDOM.render(<Test />
, document.getElementById('components-enter-animation-demo-enter-leave'));
````
<style>
#components-enter-animation-demo-enter-leave {
text-align: center;
overflow: hidden;
margin: 20px auto;
}
</style>

96
components/enter-animation/demo/page.md
View File

@ -1,96 +0,0 @@
# 页面的进场和离场
- order: 5
页面的进场和离场。
---
````jsx
var EnterAnimation = antd.EnterAnimation;
var Button = antd.Button;
var Test = React.createClass({
getInitialState() {
return {
show: true,
enter:{
type:'right',
ease:'cubic-bezier(0.19, 1, 0.22, 1)'
},
leave:{
type:'left',
ease:'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
reverse:true,
interval:0.05
}
}
},
onClick() {
this.setState({
show: !this.state.show
})
},
render() {
return (
<div>
<div style={{marginBottom: 20}}>
<Button type="primary" onClick={this.onClick}>切换</Button>
</div>
<EnterAnimation enter={this.state.enter} leave={this.state.leave}>
{this.state.show ? <div key='a'>
<div className="demo-header" enter-data leave-data={{type:'alpha'}}>
<div className="logo" leave-data={{type:'left'}}>
<img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
<span>logo</span>
</div>
<ul >
<li enter-data leave-data={{type:'right'}}></li>
<li enter-data leave-data={{type:'right'}}></li>
<li enter-data leave-data={{type:'right'}}></li>
<li enter-data leave-data={{type:'right'}}></li>
<li enter-data leave-data={{type:'right'}}></li>
</ul>
</div>
<div className="demo-content" >
<div className="demo-title" enter-data={{type:'bottom'}} leave-data={{type:'bottom',queueId:1}}>我是标题</div>
<div className="demo-kp">
<ul>
<li enter-data={{interval:0.05}} leave-data={{type:'bottom',queueId:1}}></li>
<li enter-data={{interval:0.05}} leave-data={{type:'bottom',queueId:1}}></li>
<li enter-data={{interval:0.05}} leave-data={{type:'bottom',queueId:1,delay:0.2}}></li>
</ul>
</div>
<div className="demo-title" enter-data={{type:'bottom'}} leave-data={{type:'bottom',queueId:2}}>我是标题</div>
<div className="demo-listBox">
<div className="demo-list">
<div className="title" enter-data={{type:'bottom'}} leave-data={{queueId:2}}></div>
<ul>
<li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
<li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
<li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
<li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
<li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
</ul>
</div>
</div>
</div>
<div className="demo-footer" enter-data={{type:'bottom'}} leave-data={{queueId:2}}></div>
</div> : null}
</EnterAnimation>
</div>
);
}
});
ReactDOM.render(<Test />
, document.getElementById('components-enter-animation-demo-page'));
````
<style>
#components-enter-animation-demo-page {
text-align: center;
overflow: hidden;
margin: 20px auto;
}
</style>

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

@ -1,99 +0,0 @@
# Router 默认进出场
- order: 7
router 组合的进场与出场动画。
---
````jsx
var ReactRouter = require('react-router');
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 () {
return {};
},
clickPage() {
this.setState({
enter: {delay: 0.3},
leave: {delay: 0}
});
},
render() {
var key = this.props.location.pathname;
return (
<div>
<Menu style={{marginBottom: 20}} mode="horizontal">
<Menu.Item key='home'>
<Link to="/" onClick={this.clickPage}>首页</Link>
</Menu.Item>
<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>
</div>
);
}
});
var Page1 = React.createClass({
render() {
return (
<div className="demo-router-child">
<h1>Page 1</h1>
<p><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
<p><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
<p><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
<p><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
<p><Link to="/page2">A link to page 2 should be active</Link>改变样式</p>
</div>
);
}
});
var Page2 = React.createClass({
render() {
return (
<div className="demo-router-child">
<h1>Page 2</h1>
<p><Link to="/page1">a link to page 1 </Link>我是页面2.</p>
<p><Link to="/page1">a link to page 1 </Link>我是页面2.</p>
<p><Link to="/page1">a link to page 1 </Link>我是页面2.</p>
<p><Link to="/page1">a link to page 1 </Link>我是页面2.</p>
</div>
);
}
});
ReactDOM.render((
<Router>
<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 {
text-align: center;
}
.demo-router-wap{
position: relative;
transition: height .5s;
width: 300px;
margin: auto;
}
.demo-router-child{
text-align:left;
}
</style>

27
components/enter-animation/demo/simple.md
View File

@ -1,27 +0,0 @@
# 默认
- order: 0
最简单的进场例子。
---
````jsx
var EnterAnimation = antd.EnterAnimation;
ReactDOM.render(
<EnterAnimation>
<ul key="key">
<li>依次进场</li>
<li>依次进场</li>
<li>依次进场</li>
<li>依次进场</li>
<li>依次进场</li>
<li>依次进场</li>
<li>依次进场</li>
<li>依次进场</li>
</ul>
</EnterAnimation>
, document.getElementById('components-enter-animation-demo-simple'));
````

79
components/enter-animation/demo/style.md
View File

@ -1,79 +0,0 @@
# style 自定义样式动画进出场
- order: 4
通过加上属性里的 `style` 来自定义 CSS 动画进出场。
---
````jsx
var EnterAnimation = antd.EnterAnimation;
var Button = antd.Button;
var Test = React.createClass({
getInitialState() {
return {
enter: {
style: {
transform: "translateX(50px)",
opacity: 0
},
interval: .1,
},
leave: {
interval: 0.03
},
show: true
}
},
onClick() {
this.setState({
show: !this.state.show
})
},
render() {
return (
<div>
<div style={{marginBottom: 20}}>
<Button type="primary" onClick={this.onClick}>切换</Button>
</div>
<EnterAnimation enter={this.state.enter} leave={this.state.leave}>
{this.state.show ? <div key='enter-data'>
<div className="demo-content">
<div className="demo-kp">
<ul>
<li enter-data></li>
<li enter-data></li>
<li enter-data></li>
</ul>
</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>
)
}
});
ReactDOM.render(<Test />
, document.getElementById('components-enter-animation-demo-style'));
````
<style>
#components-enter-animation-demo-style {
text-align: center;
overflow: hidden;
margin: 18px auto;
}
</style>

12
components/enter-animation/index.jsx
View File

@ -1,12 +0,0 @@
import React from 'react';
import EnterAnimation from 'enter-animation';
class AntEnterAnimation extends React.Component {
render() {
return <EnterAnimation {...this.props} />;
}
}
AntEnterAnimation.to = EnterAnimation.to;
export default AntEnterAnimation;

57
components/queue-anim/demo/basic.md Normal file
View File

@ -0,0 +1,57 @@
# 进场和离场
- order: 1
同时支持进场和离场动画。
---
````jsx
var QueueAnim = antd.QueueAnim;
var Button = antd.Button;
var Test = React.createClass({
getInitialState() {
return {
show: true
};
},
onClick() {
this.setState({
show: !this.state.show
});
},
render() {
return (
<div>
<p className="buttons">
<Button type="primary" onClick={this.onClick}>切换</Button>
</p>
<QueueAnim className="demo-content">
{this.state.show ? [
<div className="demo-kp" key="a">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>,
<div className="demo-listBox" key="b">
<div className="demo-list">
<div className="title"></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
] : null}
</QueueAnim>
</div>
);
}
});
ReactDOM.render(<Test />, document.getElementById('components-queue-anim-demo-basic'));
````

69
components/queue-anim/demo/change.md Normal file
View File

@ -0,0 +1,69 @@
# 添加与删除
- order: 5
场景里有增加或删除条目时也会触发动画。
---
````jsx
var QueueAnim = antd.QueueAnim;
var Button = antd.Button;
var Test = React.createClass({
getInitialState() {
return {
show: true,
items: [
<li key="0"></li>,
<li key="1"></li>,
<li key="2"></li>
],
};
},
onClick() {
this.setState({
show: !this.state.show,
});
},
onAdd() {
var items = this.state.items;
items.push(<li key={Date.now()}></li>);
this.setState({
show: true,
items: items,
});
},
onRemove() {
var items = this.state.items;
items.splice(items.length - 1, 1);
this.setState({
show: true,
items: items,
});
},
render() {
return (
<div>
<p className="buttons">
<Button type="primary" onClick={this.onClick}>切换</Button>
<Button onClick={this.onAdd} style={{marginLeft:10}}>添加</Button>
<Button onClick={this.onRemove} style={{marginLeft:10}}>删除</Button>
</p>
<div className="demo-content">
<div className="demo-listBox" key="b">
<div className="demo-list">
<div className="title"></div>
<QueueAnim component="ul" type={['right', 'left']}>
{this.state.show ? this.state.items: null}
</QueueAnim>
</div>
</div>
</div>
</div>
);
}
});
ReactDOM.render(<Test />, document.getElementById('components-queue-anim-demo-change'));
````

60
components/queue-anim/demo/custom.md Normal file
View File

@ -0,0 +1,60 @@
# 自定义动画进出场
- order: 3
通过 `animConfig` 来自定义动画进出场。
---
````jsx
var QueueAnim = antd.QueueAnim;
var Button = antd.Button;
var Test = React.createClass({
getInitialState() {
return {
show: true,
}
},
onClick() {
this.setState({
show: !this.state.show,
})
},
render() {
return (
<div>
<p className="buttons">
<Button type="primary" onClick={this.onClick}>切换</Button>
</p>
<QueueAnim className="demo-content"
animConfig={[
{ opacity: [1, 0], translateY: [0, 50] },
{ opacity: [1, 0], translateY: [0, -50] }
]}>
{this.state.show ? [
<div className="demo-kp" key="a">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>,
<div className="demo-listBox" key="b">
<div className="demo-list">
<div className="title"></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
] : null}
</QueueAnim>
</div>
)
}
});
ReactDOM.render(<Test />, document.getElementById('components-queue-anim-demo-custom'));
````

60
components/queue-anim/demo/enter-leave.md Normal file
View File

@ -0,0 +1,60 @@
# 进场和离场
- order: 2
通过把属性设置一个数组来分别表示进出场的效果，`type`、`animConfig`、`delay`、`duration`、`interval`、`ease` 等属性均支持配置为数组。
---
````jsx
var QueueAnim = antd.QueueAnim;
var Button = antd.Button;
var Test = React.createClass({
getInitialState() {
return {
show: true
};
},
onClick() {
this.setState({
show: !this.state.show
});
},
render() {
return (
<div>
<p className="buttons">
<Button type="primary" onClick={this.onClick}>切换</Button>
</p>
<QueueAnim className="demo-content"
key="demo"
type={['right', 'left']}
ease={['easeOutQuart', 'easeInOutQuart']}>
{this.state.show ? [
<div className="demo-kp" key="a">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>,
<div className="demo-listBox" key="b">
<div className="demo-list">
<div className="title"></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
]: null}
</QueueAnim>
</div>
);
}
});
ReactDOM.render(<Test />, document.getElementById('components-queue-anim-demo-enter-leave'));
````

62
components/enter-animation/demo/form.md → components/queue-anim/demo/form.md
View File

@ -1,13 +1,13 @@
# 表单动画进出场 # 表单动画进出场
- order: 6 - order: 4
表单组合的进场与出场动画。 表单组合的进场与出场动画。
--- ---
````jsx ````jsx
var EnterAnimation = antd.EnterAnimation; var QueueAnim = antd.QueueAnim;
var Select = antd.Select; var Select = antd.Select;
var Option = Select.Option; var Option = Select.Option;
var Checkbox = antd.Checkbox; var Checkbox = antd.Checkbox;
@ -18,49 +18,35 @@ var Button = antd.Button;
var Test = React.createClass({ var Test = React.createClass({
getInitialState() { getInitialState() {
return { return {
enter: {
type: 'right',
callback: null,
interval: 0.1
},
leave: {
type: 'left',
reverse: true,
interval: 0.05,
ease:'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
callback: ()=> {
console.log('出场结束')
}
},
show: true show: true
} };
}, },
onClick() { onClick() {
this.setState({ this.setState({
show: !this.state.show show: !this.state.show
}) });
}, },
render() { render() {
return ( return (
<div> <div>
<div style={{marginBottom: 20, textAlign: 'center'}}> <p className="buttons">
<Button type="primary" onClick={this.onClick}>切换</Button> <Button type="primary" onClick={this.onClick}>切换</Button>
</div> </p>
<EnterAnimation enter={this.state.enter} leave={this.state.leave} component='form' className="ant-form-horizontal"> <QueueAnim component="form" className="ant-form-horizontal" type="bottom" leaveReverse={true}>
{this.state.show ? <div key='from'> {this.state.show ? [
<div className="ant-form-item ant-form-item-compact"> <div className="ant-form-item ant-form-item-compact" key='name'>
<label htmlFor="userName" className="col-6" required>用户名：</label> <label htmlFor="userName" className="col-6" required>用户名：</label>
<div className="col-6"> <div className="col-6">
<p className="ant-form-text">大眼萌 minion</p> <p className="ant-form-text">大眼萌 minion</p>
</div> </div>
</div> </div>,
<div className="ant-form-item"> <div className="ant-form-item" key='password'>
<label htmlFor="password" className="col-6" required>密码：</label> <label htmlFor="password" className="col-6" required>密码：</label>
<div className="col-14"> <div className="col-14">
<input className="ant-input" type="password" id="password" placeholder="请输入密码"/> <input className="ant-input" type="password" id="password" placeholder="请输入密码"/>
</div> </div>
</div> </div>,
<div className="ant-form-item ant-form-item-compact"> <div className="ant-form-item ant-form-item-compact" key='sex'>
<label className="col-6" required>您的性别：</label> <label className="col-6" required>您的性别：</label>
<div className="col-14"> <div className="col-14">
<RadioGroup value="male"> <RadioGroup value="male">
@ -68,35 +54,33 @@ var Test = React.createClass({
<Radio value="female">女的</Radio> <Radio value="female">女的</Radio>
</RadioGroup> </RadioGroup>
</div> </div>
</div> </div>,
<div className="ant-form-item"> <div className="ant-form-item" key='remark'>
<label htmlFor="remark" className="col-6" required>备注：</label> <label htmlFor="remark" className="col-6" required>备注：</label>
<div className="col-14"> <div className="col-14">
<textarea className="ant-input" id="remark" placeholder="随便写"></textarea> <textarea className="ant-input" id="remark" placeholder="随便写"></textarea>
<p className="ant-form-explain">随便写点什么</p> <p className="ant-form-explain">随便写点什么</p>
</div> </div>
</div> </div>,
<div className="ant-form-item ant-form-item-compact"> <div className="ant-form-item ant-form-item-compact" key='checkbox'>
<div className="col-14 col-offset-6"> <div className="col-14 col-offset-6">
<label> <label>
<Checkbox /> <Checkbox />
同意 同意
</label> </label>
</div> </div>
</div> </div>,
<div className="row"> <div className="row" key='btn'>
<div className="col-16 col-offset-6"> <div className="col-16 col-offset-6">
<Button type="primary">确定</Button> <Button type="primary">确定</Button>
</div> </div>
</div> </div>
</div> : null} ] : null}
</EnterAnimation> </QueueAnim>
</div> </div>
) );
} }
}); });
ReactDOM.render(<Test /> ReactDOM.render(<Test />, document.getElementById('components-queue-anim-demo-form'));
, document.getElementById('components-enter-animation-demo-form'));
```` ````

79
components/queue-anim/demo/page.md Normal file
View File

@ -0,0 +1,79 @@
# 一个复杂些的例子
- order: 6
模拟一个完整的页面。
---
````jsx
var QueueAnim = antd.QueueAnim;
var Button = antd.Button;
var Test = React.createClass({
getInitialState() {
return {
show: true
};
},
onClick() {
this.setState({
show: !this.state.show
});
},
render() {
return (
<div>
<p className="buttons">
<Button type="primary" onClick={this.onClick}>切换</Button>
</p>
<QueueAnim type={['right', 'left']}>
{this.state.show ? [
<div className="demo-header" key="header">
<div className="logo">
<img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
<span>logo</span>
</div>
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
<li key="3"></li>
<li key="4"></li>
</QueueAnim>
</div>,
<QueueAnim className="demo-content" key="content" delay={300}>
<div className="demo-title" key="title">我是标题</div>
<div className="demo-kp" key="b">
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
</QueueAnim>
</div>
<div className="demo-title" key="title2">我是标题</div>
<div className="demo-listBox">
<QueueAnim className="demo-list" delay={500}>
<div className="title" key="title3"></div>
<QueueAnim component="ul" type="bottom" key="li">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
<li key="3"></li>
<li key="4"></li>
</QueueAnim>
</QueueAnim>
</div>
</QueueAnim>,
<QueueAnim delay={1000} type="bottom" key="footerBox">
<div className="demo-footer" key="footer"></div>
</QueueAnim>
] : null}
</QueueAnim>
</div>
);
}
});
ReactDOM.render(<Test />, document.getElementById('components-queue-anim-demo-page'));
````

148
components/queue-anim/demo/router.md Normal file
View File

@ -0,0 +1,148 @@
# Router 默认进出场
- order: 7
router 组合的进场与出场动画。
---
````jsx
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var QueueAnim = antd.QueueAnim;
var Menu = antd.Menu;
var App = React.createClass({
render() {
var key = this.props.location.pathname;
var keys = key.replace('/', '') ? [ key.replace('/', '') ] : [ 'home' ];
return (
<div>
<Menu style={{marginBottom: 10}} mode="horizontal" selectedKeys={keys}>
<Menu.Item key="home">
<Link to="/">首页</Link>
</Menu.Item>
<Menu.Item key="page1">
<Link to="/page1">Page 1</Link>
</Menu.Item>
<Menu.Item key="page2">
<Link to="/page2">Page 2</Link>
</Menu.Item>
</Menu>
<QueueAnim type={['right', 'left']} className="demo-router-wrap">
{React.cloneElement(this.props.children||<Home/>, {key: key})}
</QueueAnim>
</div>
);
}
});
var Home = React.createClass({
render() {
return (
<div className="demo-router-child">
<QueueAnim className="demo-content">
<div className="demo-kp" key="a">
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
</QueueAnim>
</div>
<div className="demo-kp" key="b">
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
</QueueAnim>
</div>
<div className="demo-kp" key="c">
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
</QueueAnim>
</div>
</QueueAnim>
</div>
);
}
});
var Page1 = React.createClass({
render() {
return (
<div className="demo-router-child">
<QueueAnim className="demo-content">
<div className="demo-kp" key="b">
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
</QueueAnim>
</div>
<div className="demo-listBox">
<QueueAnim className="demo-list" delay={200}>
<div className="title" key="title3"></div>
<QueueAnim component="ul" animConfig={{opacity:[1, 0],translateY:[0, 30],scale:[1,0.9]}} key="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
</QueueAnim>
</QueueAnim>
</div>
</QueueAnim>
</div>
);
}
});
var Page2 = React.createClass({
render() {
return (
<div className="demo-router-child">
<div className="demo-content">
<div className="demo-listBox">
<QueueAnim className="demo-list">
<div className="title" key="title3"></div>
<QueueAnim component="ul" animConfig={{opacity:[1, 0],translateY:[0, 30],scale:[1,0.9]}} key="li">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
<li key="3"></li>
<li key="4"></li>
<li key="2"></li>
</QueueAnim>
</QueueAnim>
</div>
</div>
</div>
);
}
});
ReactDOM.render((
<Router>
<Route path="/" component={App} ignoreScrollBehavior>
<Route path="page1" component={Page1} />
<Route path="page2" component={Page2} />
</Route>
</Router>
), document.getElementById('components-queue-anim-demo-router'));
````
````css
#components-queue-anim-demo-router .demo-router-wrap {
position: relative;
width: 100%;
margin: auto;
height:200px;
overflow: hidden;
}
#components-queue-anim-demo-router .queue-anim-leaving {
position: absolute;
width:100%;
}
````

34
components/queue-anim/demo/simple.md Normal file
View File

@ -0,0 +1,34 @@
# 默认
- order: 0
最简单的进场例子。
---
````jsx
var QueueAnim = antd.QueueAnim;
ReactDOM.render(
<QueueAnim delay={500}>
<div key="a">依次进场</div>
<div key="b">依次进场</div>
<div key="c">依次进场</div>
<div key="d">依次进场</div>
<div key="e">依次进场</div>
<div key="f">依次进场</div>
</QueueAnim>
, document.getElementById('components-queue-anim-demo-simple'));
````
````css
.code-box-demo > div {
overflow: hidden;
}
.code-box-demo .buttons {
text-align: center;
margin: 0 auto;
margin-bottom: 20px;
}
````

3
components/queue-anim/index.jsx Normal file
View File

@ -0,0 +1,3 @@
import QueueAnim from 'rc-queue-anim';
export default QueueAnim;

96
components/enter-animation/index.md → components/queue-anim/index.md
View File

@ -1,8 +1,7 @@
# EnterAnimation # QueueAnim
- category: Components - category: Components
- chinese: 进场动画 - chinese: 进出场动画
--- ---
@ -14,86 +13,37 @@
- 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，使页面转场更加流畅和舒适，提高整体视觉效果和产品的质感。 - 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，使页面转场更加流畅和舒适，提高整体视觉效果和产品的质感。
- 特别适合首页和需要视觉展示效果的宣传页，以及单页应用的切换页面动效。
## API ## API
元素依次进场。 元素依次进场。
```html ```html
<EnterAnimation> <QueueAnim>
<div key='demo'> <div key='demo1'>依次进场</div>
<div>依次进场</div> <div key='demo2'>依次进场</div>
<div>依次进场</div> <div key='demo3'>依次进场</div>
<div>依次进场</div> <div key='demo4'>依次进场</div>
<div>依次进场</div> </QueueAnim>
</div>
</EnterAnimation>
``` ```
如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历 dom 下一级节点来执行动画。 > 每个子标签必须带 key，如果未设置 key 将不执行动画。
```html |参数 |类型 |默认 |详细 |
<EnterAnimation enter={type:'left',delay:2}> |------------|----------------|---------|----------------|
<div key='demo'> | type | string / array | `right` | 动画内置参数 <br/> `left` `right` `top` `bottom` `scale` `scaleBig` `scaleX` `scaleY`|
<div> | animConfig | object / array | null | 配置动画参数 <br/> 如 `{opacity:[1, 0],translateY:[0, -30]}` 具体参考 [velocity](http://julian.com/research/velocity) 的写法|
<div enter-data> | delay | number / array | 0 | 整个动画的延时,以毫秒为单位 |
依次进场 | duration | number / array | 500 | 每个动画的时间,以毫秒为单位 |
</div> | interval | number / array | 100 | 每个动画的间隔时间,以毫秒为单位 |
</div> | leaveReverse | boolean | false | 出场时是否倒放,从最后一个 dom 开始往上播放 |
<div enter-data>依次进场</div> | ease | string / array | `easeOutQuart` | 动画的缓动函数,[查看详细](http://julian.com/research/velocity/#easing) |
<div enter-data={{type: 'bottom'}}>依次进场，并修改动画效果</div> | animatingClassName | array | `['queue-anim-entering', 'queue-anim-leaving']` | 进出场动画进行中的类名 |
<div>没有动画</div> | component | string | `div` | QueueAnim 替换的标签名 |
</div>
</EnterAnimation>
```
### <EnterAnimation /> > 当以上数据类型为 Array 时，`['left', 'top']` 第一个为进场动画属性, 第二个为离场属性。
|参数 |类型 |默认值 |详细 |
|-----------------|-------|-------------|----------------------------------------------------|
|enter|object| `{type:'right'}` |管理进场数据|
|leave|object| null |管理当前元素出场的数据, null 时继承 enter 里的所有标签的值 |
|component|string| `div` | EnterAnimation 替换的标签名|
### enter = {} | leave = {}
|参数 |类型 |默认值 |详细 |
|-----------------|-------|-------------|----------------------------------------------------|
|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 |整个区块的延时，以秒为单位|
|reverse |boolean|false |是否倒放,从最后一个 dom 开始往上播放|
|interval |number |0.1 |递增延时值，以秒为单位|
|callback |function|null |动画结束回调|
### 一级标签key：
|参数 |类型 |详细 |
|-----------------|-------|----------------------------------------------------|
|key|string|必需，控制进出场；|
### 子标签
|参数 |类型 |默认值 |详细 |
|-----------------|-------|-----------|----------------------------------------------------|
|enter-data |object | `{type:'right'}` |子标签进场参数|
|leave-data |object | `enter-data` |子标签出场参数|
#### enter-data = {} | leave-data = {}
|参数 |类型 |默认值 |详细 |
|-----------------|-----------------|----------------|----------------------------------------------------|
|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` 及更早的版本将没有进场效果。
<style> <style>
.code-box-demo .demo-header { .code-box-demo .demo-header {

2
index.js
View File

@ -35,7 +35,7 @@ const antd = {
Collapse: require('./components/collapse'), Collapse: require('./components/collapse'),
message: require('./components/message'), message: require('./components/message'),
Slider: require('./components/slider'), Slider: require('./components/slider'),
EnterAnimation: require('./components/enter-animation'), QueueAnim: require('./components/queue-anim'),
Radio: require('./components/radio'), Radio: require('./components/radio'),
Notification: require('./components/notification'), Notification: require('./components/notification'),
Alert: require('./components/alert'), Alert: require('./components/alert'),

2
package.json
View File

@ -34,7 +34,7 @@
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"css-animation": "~1.1.0", "css-animation": "~1.1.0",
"enter-animation": "~0.5.0", "rc-queue-anim": "~0.10.5",
"gregorian-calendar": "~3.0.0", "gregorian-calendar": "~3.0.0",
"gregorian-calendar-format": "~3.0.1", "gregorian-calendar-format": "~3.0.1",
"object-assign": "~4.0.1", "object-assign": "~4.0.1",

2
spec/page-transition.md
View File

@ -62,4 +62,4 @@
</div> </div>
> 参考我们的进场组件案例。查看[进场动画组件](/components/enter-animation/) > 参考我们的进场组件案例。查看[进场动画组件(QueueAnim)](/components/queue-anim/)