Ivan - Frontend - Add animation to modal [skip ci]
This commit is contained in:
parent
3be644e898
commit
8f5852a0d0
|
@ -1,5 +1,7 @@
|
|||
import React from 'react';
|
||||
|
||||
import {Motion, spring} from 'react-motion';
|
||||
|
||||
class Modal extends React.Component {
|
||||
static propTypes = {
|
||||
content: React.PropTypes.node
|
||||
|
@ -8,12 +10,38 @@ class Modal extends React.Component {
|
|||
render() {
|
||||
return (
|
||||
<div className="modal">
|
||||
<div className="modal__content">
|
||||
{this.props.content}
|
||||
</div>
|
||||
<Motion {...this.getAnimations()}>
|
||||
{this.renderContent.bind(this)}
|
||||
</Motion>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
getAnimations() {
|
||||
return {
|
||||
defaultStyle: {
|
||||
scale: spring(0.7),
|
||||
fade: spring(0)
|
||||
},
|
||||
style: {
|
||||
scale: spring(1),
|
||||
fade: spring(1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
renderContent(animation) {
|
||||
const style = {
|
||||
transform: 'scale(' + animation.scale + ')',
|
||||
opacity: animation.fade
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="modal__content" style={style}>
|
||||
{this.props.content}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Modal;
|
Loading…
Reference in New Issue