how to use react-motion library with modals

[rajatgalav]

I am using react-modal to create modals, and trying to slide the modal from bottom of page. For that i am trying react-motion TransitionMotion Component. My code is:

{ this.state.openNumberPopup &&
          <TransitionMotion 
            styles={[{key: 'key',style: this.getStyles()}] }
          >
            { (interpolated) =>
              <div>
                { interpolated.map(({ key, style, data }) =>
                <NumberPopup
                  key={`${key}-transition`}
                  style={{opacity: style.opacity,transform: `scale(${style.scale})`}}
                  openNumberPopup={this.state.openNumberPopup}
                  toggleNumberPopup={this.toggleNumberPopup}
                  handleChange={this.handleChange}
                  updateNumber={this.updateNumber}
                  disableSubmit={this.state.disableSubmit}
                />
                ) }
              </div>
      }
  </TransitionMotion>
}

where getStyles is
getStyles = () => ({ opacity: spring(1), scale: spring(1) });
but this is not working because modal component.

[ashr81]

Instead of TransitionMotion use Motion component from react-motion. something like this.

<Motion
  defaultStyle={{y: -100, opacity: 0}}
  style={presentStyle}
  willLeave={willLeave}>
   {(style) => (< NumberPopup style={
    {
       opacity: style.opacity,
       transform: `translate(-50%, ${style.y}px)`,
       WebkitTransform: `translate(-50%, ${style.y}px)`
     }
   } {...props}>
      {children}</NumberPopup >
    )}
</Motion>