afc163
9 years ago
9 changed files with 465 additions and 213 deletions
@ -0,0 +1,101 @@ |
|||
# 配置进出场的样式 |
|||
|
|||
- order: 1 |
|||
|
|||
配置进出场动画样式。 |
|||
|
|||
|
|||
--- |
|||
|
|||
````jsx |
|||
var EnterAnimation = antd.EnterAnimation; |
|||
|
|||
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 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"> |
|||
<div className="logo"> |
|||
<img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" /> |
|||
<span>logo</span> |
|||
</div> |
|||
<ul> |
|||
<li></li> |
|||
<li></li> |
|||
<li></li> |
|||
<li></li> |
|||
<li></li> |
|||
</ul> |
|||
</div> |
|||
<div className="demo-content" > |
|||
<div className="demo-title">我是标题</div> |
|||
<div className="demo-kp"> |
|||
<ul> |
|||
<li></li> |
|||
<li></li> |
|||
<li></li> |
|||
</ul> |
|||
</div> |
|||
<div className="demo-title">我是标题</div> |
|||
<div className="demo-listBox"> |
|||
<div className="demo-list"> |
|||
<div className="title"></div> |
|||
<ul> |
|||
<li></li> |
|||
<li></li> |
|||
<li></li> |
|||
<li></li> |
|||
<li></li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className="demo-footer"></div> |
|||
</div> : null} |
|||
</EnterAnimation> |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
|
|||
React.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> |
|||
@ -0,0 +1,97 @@ |
|||
# Router 默认进出场 |
|||
|
|||
- order: 5 |
|||
|
|||
router 组合的进场与出场动画。 |
|||
|
|||
--- |
|||
|
|||
````jsx |
|||
var ReactRouter = require('react-router'); |
|||
var history = require('react-router/lib/HashHistory').history; |
|||
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='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> |
|||
); |
|||
} |
|||
}); |
|||
React.render(( |
|||
<Router history={history}> |
|||
<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> |
|||
@ -0,0 +1,80 @@ |
|||
# style 自定义样式动画进出场 |
|||
|
|||
- order: 3 |
|||
|
|||
通过加上属性里的 `style` 来自定义 CSS 动画进出场。 |
|||
|
|||
|
|||
--- |
|||
|
|||
````jsx |
|||
var EnterAnimation = antd.EnterAnimation; |
|||
|
|||
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 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='enter-data'> |
|||
<div className="demo-content"> |
|||
<div className="demo-title" enter-data={{style: {opacity: 0}}}>我是标题</div> |
|||
<div className="demo-kp"> |
|||
<ul> |
|||
<li enter-data></li> |
|||
<li enter-data></li> |
|||
<li enter-data></li> |
|||
</ul> |
|||
</div> |
|||
<div className="demo-title" enter-data={{style: {opacity: 0}, queueId: 1, delay: 0.8}} leave-data={{delay: 0.1}}>我是标题</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> |
|||
) |
|||
} |
|||
}); |
|||
|
|||
React.render(<Test /> |
|||
, document.getElementById('components-enter-animation-demo-style')); |
|||
```` |
|||
|
|||
<style> |
|||
#components-enter-animation-demo-style { |
|||
text-align: center; |
|||
overflow: hidden; |
|||
margin: 18px auto; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue