Add enter-animation

This commit is contained in:
afc163 2015-07-28 12:32:27 +08:00
parent deb00174aa
commit 699a6c9ad3
5 changed files with 79 additions and 0 deletions

View File

@ -0,0 +1,51 @@
# 基本
- order: 0
第一个对话框。
---
````jsx
var EnterAnimation = antd.EnterAnimation;
var Test = React.createClass({
getInitialState(){
return{
visible: false
}
},
showModal() {
this.setState({
visible: true
});
},
handleOk() {
console.log('点击了确定');
this.setState({
visible: false
});
},
handleCancel() {
console.log('点击了取消');
this.setState({
visible: false
});
},
render() {
return <div>
<button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
<Modal title="第一个 Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>
</Modal>
</div>;
}
});
React.render(<Test/> , document.getElementById('components-modal-demo-basic'));
````

View File

@ -0,0 +1,8 @@
import React from 'react';
import EnterAnimation from 'enter-animation';
export default class AntEnterAnimation extends React.Component {
render() {
return <EnterAnimation {...this.props} />;
}
}

View File

@ -0,0 +1,18 @@
# Modal
- order: 11
- category: Components
- chinese: 进场动画
---
页面进场离场的动画。
## 何时使用
当页面分为几个明显的区块时,用一组进场动画渐进载入各个区块,使页面转场更加流畅和舒适,
提高整体视觉效果和产品的质感。
## API

View File

@ -22,6 +22,7 @@ var antd = {
Collapse: require('./components/collapse'),
message: require('./components/message'),
Slider: require('./components/slider'),
EnterAnimation: require('./components/enter-animation'),
Radio: require('./components/radio'),
RadioGroup: require('./components/radio/group')
};

View File

@ -32,6 +32,7 @@
],
"license": "MIT",
"dependencies": {
"enter-animation": "^0.1.0",
"gregorian-calendar": "~3.0.0",
"gregorian-calendar-format": "~3.0.1",
"object-assign": "~3.0.0",