Transition without `position: absolute;`

In demos, <Lorem /> Component’s position is set to absolute, So transition seems to work well. https://github.com/maisano/react-router-transition/blob/master/demos/index.html#L36

but If you can’t set router’s position to absolute, (like each router’s height are different and it can be changed) transition wouldn’t work well.

I’ve tried to set position: absolute on atLeave only, but it didn’t work. Also, I couldn’t figure out how to handle it using mapStyes.

Any ideas? 😞

[JurJean]

The solution from @akeelm is very nice, but I still had a problem with the footer of the page to toggle up and down. Using code below this is fixed.

                <RouteTransition
                    pathname={this.props.location.pathname}
                    atEnter={{ opacity: 0, foo: 0 }}
                    atLeave={{ opacity: 0, foo: 2 }}
                    atActive={{ opacity: 1, foo: 1 }}
                    mapStyles={(styles) => {
                    return {
                        position: (styles.foo <= 1) ? 'relative': 'absolute',
                        width: '100%',
                        height: '100%',
                        opacity: styles.opacity
                    }
                    }}>

I only still have the footer problem when I toggle routes really quick.

[albermav]

I have a similar solution, it just fades only the appearing div, and hides the older one:

<RouteTransition
  pathname={this.props.location.pathname}
  atEnter={{ opacity: 0 }}
  atLeave={{ opacity: 2 }}
  atActive={{ opacity: 1 }}
  mapStyles={styles => {
    if(styles.opacity > 1){
      return { display: 'none'}
    }
    return { opacity: styles.opacity}
  }}
>
  {this.props.children}
</RouteTransition>