how to do slide in/ out?

[cellis]

It would be nice if there were examples to do slide in/out as with react-router-transition.

[misterfresh]

not sure what you are trying to achieve. care to provide a link with an example ?

[deathmood]

Maybe smth like this?

[misterfresh]

I did a slide in using aphrodite-css then the following code:

const enteringKeyframes = {
  'from': {
    transform: 'translate3d(100%, 0, 0) skewX(-30deg)',
    opacity: 0,
    zIndex: -99
  },
  '60%': {
    transform: 'skewX(20deg)',
    opacity: 1
  },
  '80%': {
    transform: 'skewX(-5deg)',
    opacity: 1
  },
  'to': {
    transform: 'none',
    opacity: 1,
    zIndex: 99
  }
};
const styles = StyleSheet.create({
  base: {
    transition: 'all 0.6s ease-in'
  },
  entering: {
    animationName: [enteringKeyframes],
    animationDuration: '600ms',
    animationTimingFunction: 'ease-out',
    animationFillMode: 'forwards'
  }
})

let Popup = ({ popupVisible }) => <div
      style={Object.assign({},
        {
          position: 'fixed',
          width: '100%',
          height: '100%',
          top: 0,
          left: 0,
          animationDuration: 0.6
        },
        (!popupVisible) && {
          opacity: 0,
          zIndex: -99
        }
      )}
      className={css(
        (popupVisible === 'entering') && styles.entering
      )}
    >popup contents</div>