Ivan - Frontend - Add animation to modal [skip ci]

This commit is contained in:
ivan 2016-09-09 16:27:31 -03:00
parent 3be644e898
commit 8f5852a0d0
1 changed files with 31 additions and 3 deletions

View File

@ -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;