mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
Add enter-animation
This commit is contained in:
parent
deb00174aa
commit
699a6c9ad3
51
components/enter-animation/demo/basic.md
Normal file
51
components/enter-animation/demo/basic.md
Normal 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'));
|
||||
````
|
8
components/enter-animation/index.jsx
Normal file
8
components/enter-animation/index.jsx
Normal 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} />;
|
||||
}
|
||||
}
|
18
components/enter-animation/index.md
Normal file
18
components/enter-animation/index.md
Normal file
@ -0,0 +1,18 @@
|
||||
# Modal
|
||||
|
||||
- order: 11
|
||||
- category: Components
|
||||
- chinese: 进场动画
|
||||
|
||||
---
|
||||
|
||||
页面进场离场的动画。
|
||||
|
||||
## 何时使用
|
||||
|
||||
当页面分为几个明显的区块时,用一组进场动画渐进载入各个区块,使页面转场更加流畅和舒适,
|
||||
提高整体视觉效果和产品的质感。
|
||||
|
||||
## API
|
||||
|
||||
|
1
index.js
1
index.js
@ -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')
|
||||
};
|
||||
|
@ -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",
|
||||
|
Loading…
Reference in New Issue
Block a user