test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-04 04:58:55 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity

update queue-anim demo

Browse Source
This commit is contained in:
jljsj 2015-10-21 17:53:38 +08:00
parent ca595c68f5
commit ba34a49f79
11 changed files with 583 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,64 @@
# 进场和离场
- 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>
<div style={{marginBottom: 20}}>
<Button type="primary" onClick={this.onClick}>切换</Button>
</div>
<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>
);
}
});
React.render(<Test />
, document.getElementById('components-queue-anim-demo-basic'));
````
<style>
#components-queue-anim-demo-basic {
text-align: center;
overflow: hidden;
margin: 20px auto;
}
</style>

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

@ -0,0 +1,73 @@
# 添加与删除
- 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>
<div style={{marginBottom: 20}}>
<Button type="primary" onClick={this.onClick}>切换</Button>
<Button type="primary" onClick={this.onAdd} style={{marginLeft:10}}>添加</Button>
<Button type="primary" onClick={this.onRemove} style={{marginLeft:10}}>删除</Button>
</div>
<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>
);
}
});
React.render(<Test />
, document.getElementById('components-queue-anim-demo-change'));
````
<style>
#components-queue-anim-demo-change {
text-align: center;
overflow: hidden;
margin: 20px auto;
}
</style>

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

@ -0,0 +1,60 @@
# 配置进出场的样式
- order: 2
配置进出场动画样式。
---
````jsx
var QueueAnim = antd.QueueAnim;
var Button = antd.Button;
var Test = React.createClass({
onClick() {
this.setState({
show: !this.state.show,
})
},
render() {
return (
<div>
<div style={{marginBottom: 20}}>
<Button type="primary" onClick={this.onClick}>切换</Button>
</div>
<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>
);
}
});
React.render(<Test />
, document.getElementById('components-queue-anim-demo-enter-leave'));
````
<style>
#components-queue-anim-demo-enter-leave {
text-align: center;
overflow: hidden;
margin: 20px auto;
}
</style>

86
components/queue-anim/demo/form.md Normal file
View File

@ -0,0 +1,86 @@
# 表单动画进出场
- order: 4
表单组合的进场与出场动画。
---
````jsx
var QueueAnim = antd.QueueAnim;
var Select = antd.Select;
var Option = Select.Option;
var Checkbox = antd.Checkbox;
var Radio = antd.Radio;
var RadioGroup = antd.Radio.Group;
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, textAlign: 'center'}}>
<Button type="primary" onClick={this.onClick}>切换</Button>
</div>
<QueueAnim component='form' className="ant-form-horizontal" type='bottom' leaveReverse={true}>
{this.state.show ? [ <div className="ant-form-item ant-form-item-compact" key='name'>
<label htmlFor="userName" className="col-6" required>用户名：</label>
<div className="col-6">
<p className="ant-form-text">大眼萌 minion</p>
</div>
</div>,
<div className="ant-form-item" key='password'>
<label htmlFor="password" className="col-6" required>密码：</label>
<div className="col-14">
<input className="ant-input" type="password" id="password" placeholder="请输入密码"/>
</div>
</div>,
<div className="ant-form-item ant-form-item-compact" key='sex'>
<label className="col-6" required>您的性别：</label>
<div className="col-14">
<RadioGroup value="male">
<Radio value="male">男的</Radio>
<Radio value="female">女的</Radio>
</RadioGroup>
</div>
</div>,
<div className="ant-form-item" key='remark'>
<label htmlFor="remark" className="col-6" required>备注：</label>
<div className="col-14">
<textarea className="ant-input" id="remark" placeholder="随便写"></textarea>
<p className="ant-form-explain">随便写点什么</p>
</div>
</div>,
<div className="ant-form-item ant-form-item-compact" key='checkbox'>
<div className="col-14 col-offset-6">
<label>
<Checkbox />
同意
</label>
</div>
</div>,
<div className="row" key='btn'>
<div className="col-16 col-offset-6">
<Button type="primary">确定</Button>
</div>
</div>]: null}
</QueueAnim>
</div>
)
}
});
React.render(<Test />
, document.getElementById('components-queue-anim-demo-form'));
````

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

@ -0,0 +1,83 @@
# 页面的进场和离场
- 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>
<div style={{marginBottom: 20}}>
<Button type="primary" onClick={this.onClick}>切换</Button>
</div>
<QueueAnim key='a' type={['right','left']}>
{this.state.show ? [<div className="demo-header" key='header'>
<div className="logo" key='logo'>
<img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
<span>logo</span>
</div>
<QueueAnim component='ul'>
<li key='li0'></li>
<li key='li1'></li>
<li key='li2'></li>
<li key='li3'></li>
<li key='li4'></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='t_li0'></li>
<li key='t_li1'></li>
<li key='t_li2'></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='tt_li0'></li>
<li key='tt_li1'></li>
<li key='tt_li2'></li>
<li key='tt_li3'></li>
<li key='tt_li4'></li>
</QueueAnim>
</QueueAnim>
</div>
</QueueAnim>,
<QueueAnim key='footerBox' delay={1000} type='bottom'><div className="demo-footer" key='footer'></div></QueueAnim>] : null}
</QueueAnim>
</div>
);
}
});
React.render(<Test />
, document.getElementById('components-queue-anim-demo-page'));
````
<style>
#components-queue-anim-demo-page {
text-align: center;
overflow: hidden;
margin: 20px auto;
}
</style>

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

@ -0,0 +1,147 @@
# 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-wap'>
{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='t_li0'></li>
<li key='t_li1'></li>
<li key='t_li2'></li>
</QueueAnim>
</div>
<div className="demo-kp" key='b'>
<QueueAnim component='ul'>
<li key='t_li0'></li>
<li key='t_li1'></li>
<li key='t_li2'></li>
</QueueAnim>
</div>
<div className="demo-kp" key='c'>
<QueueAnim component='ul'>
<li key='t_li0'></li>
<li key='t_li1'></li>
<li key='t_li2'></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='t_li0'></li>
<li key='t_li1'></li>
<li key='t_li2'></li>
</QueueAnim>
</div>
<div className="demo-listBox">
<QueueAnim className="demo-list" delay={200}>
<div className="title" key='title3'></div>
<QueueAnim component='ul' type='bottom' key='ul'>
<li key='tt_li0'></li>
<li key='tt_li1'></li>
<li key='tt_li2'></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' type='bottom' key='li'>
<li key='tt_li0'></li>
<li key='tt_li1'></li>
<li key='tt_li2'></li>
<li key='tt_li3'></li>
<li key='tt_li4'></li>
</QueueAnim>
</QueueAnim>
</div>
</div>
</div>
);
}
});
React.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'));
````
<style>
#components-queue-anim-demo-router {
text-align: center;
overflow: hidden;
}
#components-queue-anim-demo-router .demo-router-wap{
position: relative;
width: 100%;
margin: auto;
height:200px;
overflow: hidden;
}
#components-queue-anim-demo-router .queue-anim-leaving{
position: absolute;
width:100%;
}
</style>

4
components/queue-anim/demo/simple.md
View File

@ -8,9 +8,8 @@
````jsx
var QueueAnim = antd.QueueAnim;
console.log(<QueueAnim><div key='abc'>dd</div></QueueAnim>)
React.render(
<QueueAnim interval={100} delay={1000} duration={1000}>
<QueueAnim delay={500}>
<div key='a'>依次进场</div>
<div key='b'>依次进场</div>
<div key='c'>依次进场</div>
@ -19,4 +18,3 @@ React.render(
</QueueAnim>
, document.getElementById('components-queue-anim-demo-simple'));
````

64
components/queue-anim/demo/style.md Normal file
View File

@ -0,0 +1,64 @@
# style 自定义样式动画进出场
- order: 3
通过加上属性里的 `style` 来自定义 CSS 动画进出场。
---
````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>
<div style={{marginBottom: 20}}>
<Button type="primary" onClick={this.onClick}>切换</Button>
</div>
<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>
)
}
});
React.render(<Test />
, document.getElementById('components-queue-anim-demo-style'));
````
<style>
#components-queue-anim-demo-style {
text-align: center;
overflow: hidden;
margin: 18px auto;
}
</style>

1
components/queue-anim/index.jsx
View File

@ -8,3 +8,4 @@ class AntQueueAnim extends React.Component {
}
export default AntQueueAnim;

5
components/queue-anim/index.md
View File

@ -33,13 +33,14 @@
|参数 |类型 |默认 |详细 |
|------------|----------------|---------|----------------|
| type | string / array | `right` | 动画内置参数, <br/>`left` `right` `top` `bottom` `scale` `scaleFrom` `scaleX` `scaleY`|
| animConfig | object / array | null | 配置动画参数, 如 `{opacity:[1, 0],translateY:[0, -30]}` 具体参考 [velocity](http://julian.com/research/velocity) 的写法|
| type | string / array | `right` | 动画内置参数 <br/> `left` `right` `top` `bottom` `scale` `scaleBig` `scaleX` `scaleY`|
| animConfig | object / array | null | 配置动画参数 <br/> 如 `{opacity:[1, 0],translateY:[0, -30]}` 具体参考 [velocity](http://julian.com/research/velocity) 的写法|
| delay | number / array | 0 | 整个动画的延时,以毫秒为单位 |
| duration | number / array | 500 | 每个动画的时间,以毫秒为单位 |
| interval | number / array | 30 | 每个动画的间隔时间,以毫秒为单位 |
| leaveReverse | boolean | false | 出场时是否倒放,从最后一个 dom 开始往上播放 |
| ease | string / array | `easeOutQuart` | 动画的缓动函数,[查看详细](http://julian.com/research/velocity/#easing) |
| animatingClassName | array | `['queue-anim-entering', 'queue-anim-leaving']` | 每个进出场动画开始时的默认样式 |
| component | string | `div` | QueueAnim 替换的标签名 |
> 当以上数据为Array时，`['left', 'top']` 第一个为 `enter` 数据, 第二个为 `leave` 数据;

2
package.json
View File

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