test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

update enterAnimation router add

Browse Source
This commit is contained in:
jljsj 2015-09-09 14:52:16 +08:00
parent 78f298ff4b
commit a48acc2fab
2 changed files with 15 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,7 +18,7 @@ var App = React.createClass({
getInitialState: function () {
return {
enter: {
type: 'margin-top:10px;opacity:0',
type: 'bottom',
interval: 0.1,
delay: 0,
callback: function (e) {
@ -31,45 +31,29 @@ var App = React.createClass({
},
clickPage1() {
this.setState({
enter: {interval: 0.03,type: 'margin-top:10px;opacity:0',ease: 'cubic-bezier(0.075, 0.82, 0.165, 1)',delay:0.3,
enter: {interval: 0.03,type: 'right',ease: 'cubic-bezier(0.075, 0.82, 0.165, 1)',delay:0.3,
callback: function (e) {
console.log('你点了page1,进场用的是你自定的效果', e.direction);
console.log('你点了page1', 'key:'+e.ReactElement.key, e.direction);
}
},
leave: {type: 'left',upend: true,interval:0.05,duration:0.2,ease: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',delay:0,
callback: function (e) {
console.log('你点了page1,出场用的是你自定的效果', e.direction);
console.log('如果你在用了的参数，在出场没有设定，那么出场没设的将用回进场那设定的参数，如upend，从最后个开始')
}
}
leave: {type: 'left',upend: true,interval:0.05,duration:0.2,ease: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',delay:0}
})
},
clickPage2() {
this.setState({
enter: {interval: 0.03,type: 'top',ease: null,delay:.3,callback: function (e) {console.log('你点了page2,leave为null,出场进场同效果', e.direction)}},
leave: {delay:0}
enter: {interval: 0.03,type: 'bottom',ease: null,delay:.3,callback: function (e) {console.log('你点了page2', 'key:'+e.ReactElement.key, e.direction);}},
leave: {delay:0,type:'top'}
})
},
render() {
var key = this.props.location.pathname;
var height = 200;
switch (key) {
case '/page1':
height = 210;
break;
case '/page2':
height = 190;
break;
default :
height = 100;
}
return (
<div>
<div style={{marginBottom:20}}>
<Link to="/page1" onClick={this.clickPage1} className="ant-btn ant-btn-primary" style={{marginLeft:10}}>Page 1</Link>
<Link to="/page2" onClick={this.clickPage2} className="ant-btn ant-btn-primary" style={{marginLeft:10}}>Page 2</Link>
</div>
<EnterAnimation className='demo-router-wap' enter={this.state.enter} leave={this.state.leave} ref='myChild' style={{height: height}}>
<EnterAnimation className='demo-router-wap' enter={this.state.enter} leave={this.state.leave} ref='myChild'>
{React.cloneElement(this.props.children ||<div key='home' className='demo-router-child'><h1>Home</h1><div>这是首页</div></div>, {key: key})}
</EnterAnimation>
</div>
@ -79,14 +63,15 @@ var App = React.createClass({
var Page1 = React.createClass({
render() {
var enterData = {};
return (
<div className="demo-router-child" ref='page1'>
<h1 data-enter='{"type":"right"}'>Page 1</h1>
<p data-enter='{"type":"top"}'><Link to="/page2">A link to page 1 should be active</Link>我是页面1</p>
<p data-enter='{"type":"top"}'><Link to="/page2" data-enter='{"type":"bottom"}'>A link to page 1 should be active</Link>我是页面1</p>
<p data-enter='{"type":"right"}'><Link to="/page2">A link to page 1 should be active</Link>我是页面1</p>
<p data-enter='{"type":"left"}'><Link to="/page2">A link to page 1 should be active</Link>我是页面1</p>
<p data-enter='{"duration":0.3}'><Link to="/page2">A link to page 1 should be active</Link>我是页面1</p>
<h1 data-enter>Page 1</h1>
<p data-enter><Link to="/page2">A link to page 1 should be active</Link>依次进场</p>
<p data-enter><Link to="/page2">A link to page 1 should be active</Link>依次进场</p>
<p data-enter><Link to="/page2">A link to page 1 should be active</Link>依次进场</p>
<p data-enter><Link to="/page2">A link to page 1 should be active</Link>依次进场</p>
<p data-enter='{"type":"right"}' data-leave='{"type":"left"}'><Link to="/page2">A link to page 1 should be active</Link>改变样式</p>
</div>
);
}
@ -120,7 +105,6 @@ React.render((
#components-enter-animation-demo-router {
width: 600px;
text-align: center;
overflow: hidden;
margin: 20px auto;
}
.demo-router-wap{
@ -130,10 +114,6 @@ React.render((
margin: auto;
}
.demo-router-child{
position: absolute;
}
.demo-router-child h1{
margin:0;
text-align:left;
}
</style>

2
package.json
View File

@ -33,7 +33,7 @@
"license": "MIT",
"dependencies": {
"css-animation": "~1.1.0",
"enter-animation": "~0.4.3",
"enter-animation": "~0.4.5",
"gregorian-calendar": "~3.0.0",
"gregorian-calendar-format": "~3.0.1",
"object-assign": "~4.0.1",