Skip to content

A
ant-design

wanjj_1210 / ant-design
与 Fork 源项目一致

从无法访问的项目Fork

通知 10
Star 0
Fork 0
A
ant-design

体验新版 GitCode，发现更多精彩内容 >>

提交 27dc4e33 编写于 作者: 偏 偏右
浏览文件
操作

Merge pull request #249 from ant-design/enterAnimation0.4.0 

Enter animation0.4.0
上级 3474caac d3f40e37
隐藏空白更改
内联 并排
Showing with 465 addition and 213 deletion
components/enter-animation/demo/basic.md
浏览文件 @ 27dc4e33
......@@ -2,7 +2,7 @@
- order: 0
默认子节点进场动画。为避免与本站页面的进场冲突，所以 `EnterAnimation` 里延时 1 秒，递增 `interval` 为 0.3。
默认子节点进场动画。
---
......@@ -11,75 +11,62 @@
var EnterAnimation = antd.EnterAnimation;
var Test = React.createClass({
getInitialState(){
getInitialState() {
return {
direction:'enter',
upend:false,
type:'right',
interval:0.3
bool:true,
}
},
onEnter(){
onClick() {
this.setState({
direction:'enter',
upend:false,
type:'right',
interval:0.3
})
},
onLeave(){
this.setState({
direction:'leave',
upend:false,
type:'left',
interval:.1
bool:!this.state.bool,
})
},
render() {
return (
<div>
<div style={{marginBottom:20}}>
<button className="ant-btn ant-btn-primary" onClick={this.onEnter}>进场</button>
<button className="ant-btn ant-btn-primary" style={{marginLeft:20}} onClick={this.onLeave}>出场</button>
<div style={{marginBottom: 20}}>
<button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
</div>
<EnterAnimation interval={this.state.interval} type={this.state.type} upend={this.state.upend} direction={this.state.direction}>
<div className="demo-header" enter-data>
<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" enter-data>
<div className="demo-title">我是标题</div>
<div className="demo-kp">
<EnterAnimation>
{this.state.bool ? <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-title">我是标题</div>
<div className="demo-listBox">
<div className="demo-list">
<div className="title"></div>
<div className="demo-content" >
<div className="demo-title">我是标题</div>
<div className="demo-kp">
<ul>
<li></li>
<li></li>
<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>
<div className="demo-footer" enter-data></div>
<div className="demo-footer"></div>
</div> : null}
</EnterAnimation>
</div>
);
......@@ -92,7 +79,6 @@ React.render(<Test />
<style>
#components-enter-animation-demo-basic {
width: 600px;
text-align: center;
overflow: hidden;
margin: 20px auto;
......
components/enter-animation/demo/enter-data.md
浏览文件 @ 27dc4e33
# 指定节点动画进场
# 指定节点动画进出场
- order: 1
- order: 2
通过加上 `enter-data` 属性来指定需要动画进场的元素，并且可以定义每个元素的动画效果，用到的参数有 `type` `queueId` `delay`。
通过加上 `enter-data` 属性来指定需要动画进场的元素，并且可以定义每个元素的动画效果。
---
......@@ -11,81 +11,55 @@
var EnterAnimation = antd.EnterAnimation;
var Test = React.createClass({
getInitialState(){
getInitialState() {
return {
direction:'enter',
upend:false,
type:'right',
interval:0.1,
delay:0.7
enter: {
type: 'right',
interval: .1,
},
leave: {
interval: 0.03
},
show: true
}
},
onEnter(){
onClick() {
this.setState({
direction:'enter',
upend:false,
type:'right',
interval:0.05,
delay:0.7
show: !this.state.show
})
},
onLeave(){
this.setState({
direction:'leave',
upend:false,
type:'right',
interval:.03,
delay:0.1
})
},
render() {
return (
<div>
<div style={{marginBottom:20}}>
<button className="ant-btn ant-btn-primary" onClick={this.onEnter}>进场</button>
<button className="ant-btn ant-btn-primary" style={{marginLeft:20}} onClick={this.onLeave}>出场</button>
</div>
<EnterAnimation interval={this.state.interval} type={this.state.type} upend={this.state.upend} direction={this.state.direction}>
<div className="demo-header" enter-data={{type: 'alpha'}}>
<div className="logo" enter-data={{type: 'left'}}>
<img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg"/>
<span>logo</span>
</div>
<ul>
<li enter-data></li>
<li enter-data></li>
<li enter-data></li>
<li enter-data></li>
<li enter-data></li>
</ul>
<div>
<div style={{marginBottom: 20}}>
<button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
</div>
<div className="demo-content">
<div className="demo-title" enter-data={{type:'alpha'}}>我是标题</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={{type:'alpha',queueId:1,delay:this.state.delay}}>我是标题</div>
<div className="demo-listBox">
<div className="demo-list">
<div className="title" enter-data={{type:'bottom',queueId:1}}></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={{type: 'alpha'}}>我是标题</div>
<div className="demo-kp">
<ul>
<li enter-data={{type:'bottom',queueId:1}}></li>
<li enter-data={{type:'bottom',queueId:1}}></li>
<li enter-data={{type:'bottom',queueId:1}}></li>
<li enter-data={{type:'bottom',queueId:1}}></li>
<li enter-data={{type:'bottom',queueId:1}}></li>
<li enter-data></li>
<li enter-data></li>
<li enter-data></li>
</ul>
</div>
<div className="demo-title" enter-data={{type: 'alpha', queueId: 1, delay: 0.8}} leave-data={{delay: 0.1}}>我是标题</div>
<div className="demo-listBox">
<div className="demo-list">
<div className="title" enter-data={{type: 'bottom', queueId: 1}}></div>
<ul>
<li enter-data={{type: 'bottom', queueId: 1}}></li>
<li enter-data={{type: 'bottom', queueId: 1}}></li>
<li enter-data={{type: 'bottom', queueId: 1}}></li>
</ul>
</div>
</div>
</div>
</div>
<div className="demo-footer" enter-data={{type:'bottom',queueId:1}}></div>
</EnterAnimation>
</div>
</div> : null}
</EnterAnimation>
</div>
)
}
});
......@@ -96,9 +70,8 @@ React.render(<Test />
<style>
#components-enter-animation-demo-enter-data {
width: 600px;
text-align: center;
overflow: hidden;
margin: 20px auto;
margin: 18px auto;
}
</style>
components/enter-animation/demo/enter-leave.md 0 → 100644
浏览文件 @ 27dc4e33
# 配置进出场的样式
- 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>
components/enter-animation/demo/form.md
浏览文件 @ 27dc4e33
# 表单动画进场
# 表单动画进出场
- order: 2
- order: 4
表单组全合的进场与出场动画。
表单组合的进场与出场动画。
---
......@@ -15,85 +15,81 @@ var Radio = antd.Radio;
var RadioGroup = antd.Radio.Group;
var Test = React.createClass({
getInitialState(){
getInitialState() {
return {
direction:'enter',
upend:false,
type:'right',
interval:0.1,
callback:null
enter: {
type: 'right',
callback: null,
interval: 0.1
},
leave: {
type: 'left',
reverse: true,
interval: 0.05,
callback: ()=> {
console.log('出场结束')
}
},
show: true
}
},
onEnter(){
onClick() {
this.setState({
direction:'enter',
upend:false,
type:'right',
callback:null
})
},
onLeave(){
this.setState({
direction:'leave',
upend:true,
type:'bottom',
callback:function (){
console.log('出场结束');
}
show: !this.state.show
})
},
render() {
return (
<div>
<div style={{marginBottom:20,textAlign:'center'}}>
<button className="ant-btn ant-btn-primary" onClick={this.onEnter}>进场</button>
<button className="ant-btn ant-btn-primary" style={{marginLeft:20}} onClick={this.onLeave}>出场</button>
<div>
<div style={{marginBottom: 20, textAlign: 'center'}}>
<button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
</div>
<EnterAnimation enter={this.state.enter} leave={this.state.leave} component='form' className="ant-form-horizontal">
{this.state.show ? <div key='from'>
<div className="ant-form-item ant-form-item-compact">
<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">
<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">
<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">
<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">
<div className="col-14 col-offset-6">
<label>
<Checkbox />
同意
</label>
</div>
</div>
<div className="row">
<div className="col-16 col-offset-6">
<input type="submit" className="ant-btn ant-btn-primary" value="确 定" />
</div>
</div>
</div> : null}
</EnterAnimation>
</div>
<form className="ant-form-horizontal">
<EnterAnimation interval={this.state.interval} type={this.state.type} upend={this.state.upend} direction={this.state.direction} callback={this.state.callback}>
<div className="ant-form-item ant-form-item-compact">
<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">
<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">
<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">
<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">
<div className="col-14 col-offset-6">
<label>
<Checkbox /> 同意
</label>
</div>
</div>
<div className="row">
<div className="col-16 col-offset-6">
<input type="submit" className="ant-btn ant-btn-primary" value="确 定" />
</div>
</div>
</EnterAnimation>
</form>
</div>
)
}
});
......@@ -102,11 +98,3 @@ React.render(<Test />
, document.getElementById('components-enter-animation-demo-form'));
````
<style>
#components-enter-animation-demo-enter-data {
width: 600px;
text-align: center;
overflow: hidden;
margin: 20px auto;
}
</style>
components/enter-animation/demo/router.md 0 → 100644
浏览文件 @ 27dc4e33
# 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>
components/enter-animation/demo/style.md 0 → 100644
浏览文件 @ 27dc4e33
# 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>
components/enter-animation/index.jsx
浏览文件 @ 27dc4e33
......@@ -9,3 +9,4 @@ class AntEnterAnimation extends React.Component {
AntEnterAnimation.to = EnterAnimation.to;
export default AntEnterAnimation;
components/enter-animation/index.md
浏览文件 @ 27dc4e33
......@@ -2,7 +2,7 @@
- category: Components
- chinese: 进场动画
- cols: 1
---
......@@ -28,7 +28,7 @@
</EnterAnimation>
```
如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历dom下一级节点来执行动画。
如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历 dom 下一级节点来执行动画。
```html
<EnterAnimation type="left" delay={2}>
......@@ -43,6 +43,18 @@
</EnterAnimation>
```
router 使用方法:
```html
<EnterAnimation enter={type:'left'} leave={type:'right'}>
{cloneElement(this.props.children || <div/>, {key: 'demo1'})}
//或者直接标签
<div key='demo2'>
<div>依次进场</div>
<div>依次进场</div>
</div>
</EnterAnimation>
```
## API
......@@ -50,32 +62,46 @@
|参数 |类型 |默认值 |详细 |
|-----------------|-------|-------------|----------------------------------------------------|
|type |string |`right` |执行动画的内置参数 |
|eStyle |string |null |同上， style 的样式动画, `type` 有值，此项无效|
|direction |string |`enter`|动画进场或出场样式,以 `enter` `leave` 两值|
|duration |number |0.5 |每个动画的时间|
|enter|object| `{type:'right'}` |管理进场数据|
|leave|object| null |管理当前元素出场的数据, null 时继承 enter 里的所有标签的值 |
|component|string| `div` | EnterAnimation 替换的标签名|
### enter = {} | leave = {}
|参数 |类型 |默认值 |详细 |
|-----------------|-------|-------------|----------------------------------------------------|
|type |string |`right` |内置动画样式：<br/> `alpha` `left` `right` `top` `bottom` `scale` `scaleBig` `scaleX` `scaleY` |
|style |object / string |null |同上， style 的样式动画, `type` 有值，此项无效。<br/>如 `{transform:'translateX(100px)'}` 或 `'transform: translateX(100px)'`|
|duration |number |0.5 |每个动画的时间,以秒为单位|
|ease |string|`cubic-bezier(0.165, 0.84, 0.44, 1);`|样式缓动,只支持 css 样式缓动;|
|delay |number |0 |整个区块的延时，以秒为单位|
|upend |boolean|false |是否倒放,从最后一个dom开始往上播放|
|reverse |boolean|false |是否倒放,从最后一个 dom 开始往上播放|
|interval |number |0.1 |递增延时值，以秒为单位|
|callback |function|null |动画结束回调|
### enter-data
### 一级标签key：
|参数 |类型 |详细 |
|-----------------|-------|----------------------------------------------------|
|key|string|必需，控制进出场；|
### 子标签
|参数 |类型 |默认值 |详细 |
|-----------------|-------|-----------|----------------------------------------------------|
|enter-data |object | `right` |子标签动画参数|
|enter-data |object | `{type:'right'}` |子标签进场参数|
|leave-data |object | `enter-data` |子标签出场参数|
#### enter-data={}
#### enter-data = {} | leave-data = {}
|参数 |类型 |默认值 |详细 |
|-----------------|-----------------|----------------|----------------------------------------------------|
|type |string |`right` |内置动画样式：<br/> `alpha` `left` `right` `top` `bottom` `scale` `scaleBig` `scaleX` `scaleY`|
|style |string |null |动画样式，如 `transform: translateX(100px)`，`type` 有值此项无效|
|direction |string |`enter` |动画进出场方向：`enter` `leave`,覆盖标签里的值|
|duration |number |0.5 |动画的时间,以秒为单位,覆盖标签里的值|
|ease |string |`cubic-bezier(0.165, 0.84, 0.44, 1)`|样式缓动，只支持 css 样式缓动,覆盖标签里的值|
|delay |number |0 |动画的延时，依照结构递增以上的 `interval`|
|type |string |`right` |同标签里的 `type`,覆盖标签里的值|
|style |object / string |null |同标签里的 `style`,覆盖标签里的值|
|duration |number |0.5 |同标签里的 `duration`,覆盖标签里的值|
|ease |string |`cubic-bezier(0.165, 0.84, 0.44, 1)`|同标签里的 `ease`,覆盖标签里的值|
|delay |number |0 |当前动画的延时，依照结构递增以上的 `interval`|
|queueId |number |0 |动画的线程|
> 由于使用了 CSS3 动画，所以 `IE9` 及更早的版本将没有进场效果。
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或