You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
3.3 KiB
96 lines
3.3 KiB
9 years ago
|
# 页面的进场和离场
|
||
|
|
|
||
|
|
- order: 5
|
||
|
|
|
||
|
|
页面的进场和离场。
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
````jsx
|
||
|
|
var EnterAnimation = antd.EnterAnimation;
|
||
|
|
|
||
|
|
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 className="ant-btn ant-btn-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>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
React.render(<Test />
|
||
|
|
, document.getElementById('components-enter-animation-demo-page'));
|
||
|
|
````
|
||
|
|
|
||
|
|
<style>
|
||
|
|
#components-enter-animation-demo-page {
|
||
|
|
text-align: center;
|
||
|
|
overflow: hidden;
|
||
|
|
margin: 20px auto;
|
||
|
|
}
|
||
|
|
</style>
|