Browse Source

Update Modal animation

master
meriadec 7 years ago
parent
commit
6a00993481
No known key found for this signature in database GPG Key ID: 1D2FC2305E2CB399
  1. 8
      src/components/base/Modal/index.js

8
src/components/base/Modal/index.js

@ -30,7 +30,7 @@ type Props = {
} }
const springConfig = { const springConfig = {
stiffness: 350, stiffness: 380,
} }
const mapStateToProps = (state, { name, isOpened }: { name: string, isOpened?: boolean }) => ({ const mapStateToProps = (state, { name, isOpened }: { name: string, isOpened?: boolean }) => ({
@ -77,7 +77,7 @@ const Wrapper = styled(Tabbable).attrs({
mb: 100, mb: 100,
style: p => ({ style: p => ({
opacity: p.op, opacity: p.op,
transform: `translate3d(0, ${p.offset}px, 0)`, transform: `scale3d(${p.scale}, ${p.scale}, ${p.scale})`,
}), }),
})` })`
outline: none; outline: none;
@ -174,7 +174,7 @@ export class Modal extends Component<Props> {
onHide={onHide} onHide={onHide}
motionStyle={(spring, isVisible) => ({ motionStyle={(spring, isVisible) => ({
opacity: spring(isVisible ? 1 : 0, springConfig), opacity: spring(isVisible ? 1 : 0, springConfig),
y: spring(isVisible ? 0 : 20, springConfig), scale: spring(isVisible ? 1 : 0.95, springConfig),
})} })}
> >
{(m, isVisible, isAnimated) => ( {(m, isVisible, isAnimated) => (
@ -188,7 +188,7 @@ export class Modal extends Component<Props> {
> >
<Wrapper <Wrapper
op={m.opacity} op={m.opacity}
offset={m.y} scale={m.scale}
innerRef={n => (this._wrapper = n)} innerRef={n => (this._wrapper = n)}
onClick={e => e.stopPropagation()} onClick={e => e.stopPropagation()}
> >

Loading…
Cancel
Save