GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update queue-anim demos

pull/423/head
afc163 9 years ago
parent
cd0703e462
commit
c4b0918872
11 changed files with 265 additions and 282 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 45
      components/queue-anim/demo/basic.md
  2. 42
      components/queue-anim/demo/change.md
  3. 60
      components/queue-anim/demo/custom.md
  4. 57
      components/queue-anim/demo/enter-leave.md
  5. 26
      components/queue-anim/demo/form.md
  6. 106
      components/queue-anim/demo/page.md
  7. 101
      components/queue-anim/demo/router.md
  8. 24
      components/queue-anim/demo/simple.md
  9. 64
      components/queue-anim/demo/style.md
  10. 9
      components/queue-anim/index.jsx
  11. 13
      components/queue-anim/index.md

45
components/queue-anim/demo/basic.md
View File

@ -2,7 +2,7 @@
- order: 1
自动。
同时支持进场和离场动画。
---
@ -13,29 +13,30 @@ var Button = antd.Button;
var Test = React.createClass({
getInitialState() {
return {
show: true,
}
show: true
};
},
onClick() {
this.setState({
show: !this.state.show,
})
show: !this.state.show
});
},
render() {
return (
<div>
<div style={{marginBottom: 20}}>
<p className="buttons">
<Button type="primary" onClick={this.onClick}>切换</Button>
</div>
</p>
<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'>
{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>
@ -44,21 +45,13 @@ var Test = React.createClass({
<li></li>
</ul>
</div>
</div>] : null}
</div>
] : null}
</QueueAnim>
</div>
);
}
});
ReactDOM.render(<Test />
, document.getElementById('components-queue-anim-demo-basic'));
ReactDOM.render(<Test />, document.getElementById('components-queue-anim-demo-basic'));
````
<style>
#components-queue-anim-demo-basic {
text-align: center;
overflow: hidden;
margin: 20px auto;
}
</style>

42
components/queue-anim/demo/change.md
View File

@ -2,24 +2,29 @@
- 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>],
}
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;
@ -27,29 +32,29 @@ var Test = React.createClass({
this.setState({
show: true,
items: items,
})
});
},
onRemove() {
var items = this.state.items;
items.splice(items.length-1, 1);
items.splice(items.length - 1, 1);
this.setState({
show: true,
items: items,
})
});
},
render() {
return (
<div>
<div style={{marginBottom: 20}}>
<p className="buttons">
<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>
<Button onClick={this.onAdd} style={{marginLeft:10}}>添加</Button>
<Button onClick={this.onRemove} style={{marginLeft:10}}>删除</Button>
</p>
<div className="demo-content">
<div className="demo-listBox" key='b'>
<div className="demo-listBox" key="b">
<div className="demo-list">
<div className="title"></div>
<QueueAnim component='ul' type={['right', 'left']}>
<QueueAnim component="ul" type={['right', 'left']}>
{this.state.show ? this.state.items: null}
</QueueAnim>
</div>
@ -60,14 +65,5 @@ var Test = React.createClass({
}
});
ReactDOM.render(<Test />
, document.getElementById('components-queue-anim-demo-change'));
ReactDOM.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/custom.md
View File

@ -0,0 +1,60 @@
# 自定义动画进出场
- order: 3
通过 `animConfig` 来自定义动画进出场。
---
````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>
<p className="buttons">
<Button type="primary" onClick={this.onClick}>切换</Button>
</p>
<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>
)
}
});
ReactDOM.render(<Test />, document.getElementById('components-queue-anim-demo-custom'));
````

57
components/queue-anim/demo/enter-leave.md
View File

@ -1,9 +1,8 @@
# 配置进出场的样式
# 进场和离场
- order: 2
配置进出场动画样式。
通过把属性设置一个数组来分别表示进出场的效果，`type`、`animConfig`、`delay`、`duration`、`interval`、`ease` 等属性均支持配置为数组。
---
@ -14,52 +13,48 @@ var Button = antd.Button;
var Test = React.createClass({
getInitialState() {
return {
show: true,
}
show: true
};
},
onClick() {
this.setState({
show: !this.state.show,
})
show: !this.state.show
});
},
render() {
return (
<div>
<div style={{marginBottom: 20}}>
<p className="buttons">
<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>
</p>
<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>
</div>]: null}
]: null}
</QueueAnim>
</div>
);
}
});
ReactDOM.render(<Test />
, document.getElementById('components-queue-anim-demo-enter-leave'));
ReactDOM.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>

26
components/queue-anim/demo/form.md
View File

@ -18,22 +18,23 @@ var Button = antd.Button;
var Test = React.createClass({
getInitialState() {
return {
show: true,
}
show: true
};
},
onClick() {
this.setState({
show: !this.state.show,
})
show: !this.state.show
});
},
render() {
return (
<div>
<div style={{marginBottom: 20, textAlign: 'center'}}>
<p className="buttons">
<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'>
</p>
<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>
@ -73,14 +74,13 @@ var Test = React.createClass({
<div className="col-16 col-offset-6">
<Button type="primary">确定</Button>
</div>
</div>]: null}
</div>
] : null}
</QueueAnim>
</div>
)
);
}
});
ReactDOM.render(<Test />
, document.getElementById('components-queue-anim-demo-form'));
ReactDOM.render(<Test />, document.getElementById('components-queue-anim-demo-form'));
````

106
components/queue-anim/demo/page.md
View File

@ -1,8 +1,8 @@
# 页面的进场和离场
# 一个复杂些的例子
- order: 6
页面的进场和离场。
模拟一个完整的页面。
---
@ -13,71 +13,67 @@ var Button = antd.Button;
var Test = React.createClass({
getInitialState() {
return {
show: true,
}
show: true
};
},
onClick() {
this.setState({
show: !this.state.show,
})
show: !this.state.show
});
},
render() {
return (
<div>
<div style={{marginBottom: 20}}>
<p className="buttons">
<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}
</p>
<QueueAnim type={['right', 'left']}>
{this.state.show ? [
<div className="demo-header" key="header">
<div className="logo">
<img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
<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">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
<li key="3"></li>
<li key="4"></li>
</QueueAnim>
</QueueAnim>
</div>
</QueueAnim>,
<QueueAnim delay={1000} type="bottom" key="footerBox">
<div className="demo-footer" key="footer"></div>
</QueueAnim>
] : null}
</QueueAnim>
</div>
);
}
});
ReactDOM.render(<Test />
, document.getElementById('components-queue-anim-demo-page'));
ReactDOM.render(<Test />, document.getElementById('components-queue-anim-demo-page'));
````
<style>
#components-queue-anim-demo-page {
text-align: center;
overflow: hidden;
margin: 20px auto;
}
</style>

101
components/queue-anim/demo/router.md
View File

@ -17,77 +17,79 @@ var Menu = antd.Menu;
var App = React.createClass({
render() {
var key = this.props.location.pathname;
var keys = key.replace('/','') ? [ key.replace('/','') ] : [ 'home' ];
var keys = key.replace('/', '') ? [ key.replace('/', '') ] : [ 'home' ];
return (
<div>
<Menu style={{marginBottom: 10}} mode="horizontal" selectedKeys={keys}>
<Menu.Item key='home'>
<Menu.Item key="home">
<Link to="/">首页</Link>
</Menu.Item>
<Menu.Item key='page1'>
<Menu.Item key="page1">
<Link to="/page1">Page 1</Link>
</Menu.Item>
<Menu.Item key='page2'>
<Menu.Item key="page2">
<Link to="/page2">Page 2</Link>
</Menu.Item>
</Menu>
<QueueAnim type={['right','left']} className='demo-router-wap'>
<QueueAnim type={['right', 'left']} className="demo-router-wrap">
{React.cloneElement(this.props.children||<Home/>, {key: key})}
</QueueAnim>
</div>
);
}
});
var Home = React.createClass({
render() {
return (
<div className='demo-router-child'>
<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>
<div className="demo-kp" key="a">
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></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>
<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-kp" key='c'>
<QueueAnim component='ul'>
<li key='t_li0'></li>
<li key='t_li1'></li>
<li key='t_li2'></li>
<div className="demo-kp" key="c">
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
</QueueAnim>
</div>
</QueueAnim>
</div>
);
}
})
});
var Page1 = React.createClass({
render() {
return (
<div className='demo-router-child'>
<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>
<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-listBox">
<QueueAnim className="demo-list" delay={200}>
<div className="title" key='title3'></div>
<QueueAnim component='ul' animConfig={{opacity:[1, 0],translateY:[0, 30],scale:[1,0.9]}} key='ul'>
<li key='tt_li0'></li>
<li key='tt_li1'></li>
<li key='tt_li2'></li>
<div className="title" key="title3"></div>
<QueueAnim component="ul" animConfig={{opacity:[1, 0],translateY:[0, 30],scale:[1,0.9]}} key="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
</QueueAnim>
</QueueAnim>
</div>
@ -96,20 +98,22 @@ var Page1 = React.createClass({
);
}
});
var Page2 = React.createClass({
render() {
return (
<div className='demo-router-child'>
<div className="demo-content" >
<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' animConfig={{opacity:[1, 0],translateY:[0, 30],scale:[1,0.9]}} 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>
<div className="title" key="title3"></div>
<QueueAnim component="ul" animConfig={{opacity:[1, 0],translateY:[0, 30],scale:[1,0.9]}} key="li">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
<li key="3"></li>
<li key="4"></li>
<li key="2"></li>
</QueueAnim>
</QueueAnim>
</div>
@ -118,6 +122,7 @@ var Page2 = React.createClass({
);
}
});
ReactDOM.render((
<Router>
<Route path="/" component={App} ignoreScrollBehavior>
@ -128,20 +133,16 @@ ReactDOM.render((
), 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{
````css
#components-queue-anim-demo-router .demo-router-wrap {
position: relative;
width: 100%;
margin: auto;
height:200px;
overflow: hidden;
}
#components-queue-anim-demo-router .queue-anim-leaving{
#components-queue-anim-demo-router .queue-anim-leaving {
position: absolute;
width:100%;
}
</style>
````

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

@ -8,13 +8,27 @@
````jsx
var QueueAnim = antd.QueueAnim;
ReactDOM.render(
<QueueAnim delay={500}>
<div key='a'>依次进场</div>
<div key='b'>依次进场</div>
<div key='c'>依次进场</div>
<div key='d'>依次进场</div>
<div key='e'>依次进场</div>
<div key="a">依次进场</div>
<div key="b">依次进场</div>
<div key="c">依次进场</div>
<div key="d">依次进场</div>
<div key="e">依次进场</div>
<div key="f">依次进场</div>
</QueueAnim>
, document.getElementById('components-queue-anim-demo-simple'));
````
````css
.code-box-demo > div {
overflow: hidden;
}
.code-box-demo .buttons {
text-align: center;
margin: 0 auto;
margin-bottom: 20px;
}
````

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

@ -1,64 +0,0 @@
# 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>
)
}
});
ReactDOM.render(<Test />
, document.getElementById('components-queue-anim-demo-style'));
````
<style>
#components-queue-anim-demo-style {
text-align: center;
overflow: hidden;
margin: 18px auto;
}
</style>

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

@ -1,10 +1,3 @@
import React from 'react';
import QueueAnim from 'rc-queue-anim';
class AntQueueAnim extends React.Component {
render() {
return <QueueAnim {...this.props} />;
}
}
export default AntQueueAnim;
export default QueueAnim;

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

@ -3,7 +3,6 @@
- category: Components
- chinese: 进出场动画
---
通过简单的配置对一组元素添加串行的进场动画效果。
@ -14,6 +13,8 @@
- 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，使页面转场更加流畅和舒适，提高整体视觉效果和产品的质感。
- 特别适合首页和需要视觉展示效果的宣传页，以及单页应用的切换页面动效。
## API
@ -27,9 +28,8 @@
<div key='demo4'>依次进场</div>
</QueueAnim>
```
### API
> 每个子标签如需要动画，必需带key，如果没key将不执行动画;
> 每个子标签必须带 key，如果未设置 key 将不执行动画。
|参数 |类型 |默认 |详细 |
|------------|----------------|---------|----------------|
@ -37,14 +37,13 @@
| 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 | 100 | 每个动画的间隔时间,以毫秒为单位 |
| interval | number / array | 100 | 每个动画的间隔时间,以毫秒为单位 |
| leaveReverse | boolean | false | 出场时是否倒放,从最后一个 dom 开始往上播放 |
| ease | string / array | `easeOutQuart` | 动画的缓动函数,[查看详细](http://julian.com/research/velocity/#easing) |
| animatingClassName | array | `['queue-anim-entering', 'queue-anim-leaving']` | 每个进出场动画开始时的默认样式 |
| animatingClassName | array | `['queue-anim-entering', 'queue-anim-leaving']` | 进出场动画进行中的类名 |
| component | string | `div` | QueueAnim 替换的标签名 |
> 当以上数据为Array时，`['left', 'top']` 第一个为 `enter` 数据, 第二个为 `leave` 数据;
> 当以上数据类型为 Array 时，`['left', 'top']` 第一个为进场动画属性, 第二个为离场属性。
<style>
.code-box-demo .demo-header {

Write Preview
Loading…
Cancel
Save