2016-03-31 09:40:55 +08:00
|
|
|
---
|
|
|
|
order: 6
|
|
|
|
title: 一个复杂些的例子
|
|
|
|
---
|
2015-10-21 17:53:38 +08:00
|
|
|
|
2015-10-23 22:37:42 +08:00
|
|
|
模拟一个完整的页面。
|
2015-10-21 17:53:38 +08:00
|
|
|
|
|
|
|
````jsx
|
2015-10-28 20:55:49 +08:00
|
|
|
import { QueueAnim, Button } from 'antd';
|
2015-10-21 17:53:38 +08:00
|
|
|
|
2015-10-28 20:55:49 +08:00
|
|
|
const Test = React.createClass({
|
2015-10-21 17:53:38 +08:00
|
|
|
getInitialState() {
|
|
|
|
return {
|
2015-10-23 22:37:42 +08:00
|
|
|
show: true
|
|
|
|
};
|
2015-10-21 17:53:38 +08:00
|
|
|
},
|
|
|
|
onClick() {
|
|
|
|
this.setState({
|
2015-10-23 22:37:42 +08:00
|
|
|
show: !this.state.show
|
|
|
|
});
|
2015-10-21 17:53:38 +08:00
|
|
|
},
|
|
|
|
render() {
|
2016-04-13 15:00:47 +08:00
|
|
|
const page = this.state.show ? [
|
|
|
|
<div className="demo-header" key="header">
|
|
|
|
<div className="logo">
|
2016-04-18 14:58:38 +08:00
|
|
|
<img alt="logo" width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
|
2016-04-13 15:00:47 +08:00
|
|
|
<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">
|
2015-10-23 22:37:42 +08:00
|
|
|
<li key="0"></li>
|
|
|
|
<li key="1"></li>
|
|
|
|
<li key="2"></li>
|
2015-11-25 17:35:49 +08:00
|
|
|
<li key="3"></li>
|
|
|
|
<li key="4"></li>
|
2015-10-23 22:37:42 +08:00
|
|
|
</QueueAnim>
|
2015-11-25 17:35:49 +08:00
|
|
|
</QueueAnim>
|
2016-04-13 15:00:47 +08:00
|
|
|
</div>
|
|
|
|
</QueueAnim>,
|
|
|
|
<QueueAnim delay={1000} type="bottom" key="footerBox">
|
|
|
|
<div className="demo-footer" key="footer"></div>
|
|
|
|
</QueueAnim>
|
|
|
|
] : null;
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<p className="buttons">
|
|
|
|
<Button type="primary" onClick={this.onClick}>切换</Button>
|
|
|
|
</p>
|
|
|
|
<QueueAnim type={['right', 'left']}>{page}</QueueAnim>
|
2015-10-21 17:53:38 +08:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2015-12-29 12:08:58 +08:00
|
|
|
ReactDOM.render(<Test />, mountNode);
|
2015-10-21 17:53:38 +08:00
|
|
|
````
|