Stacking containers after each route transition

[ryancoughlin]

I started to notice the performance to lag a bit after playing with a transition. My routes started to stack (the one I was opening).

Thought on this behavior?

// we need to map the `scale` prop we define below
// to the transform style property
function mapStyles(styles) {
  return {
    opacity: styles.opacity,
    transform: `scale3d(${styles.scale}, ${styles.scale}, 1)`,
  }
}

// wrap the `spring` helper to use a bouncy config
function bounce(val) {
  return spring(val, {
    stiffness: 174,
    damping: 26,
  })
}

// child matches will...
const bounceTransition = {
  // start in a transparent, upscaled state
  atEnter: {
    opacity: 0,
    scale: bounce(0.9),
  },
  // leave in a transparent, downscaled state
  atLeave: {
    opacity: 0,
    scale: bounce(0.9),
  },
  // and rest at an opaque, normally-scaled state
  atActive: {
    opacity: 1,
    scale: bounce(1),
  },
}

class App extends Component {
  render() {
    return (
      <Router>
        <AnimatedSwitch
          atEnter={bounceTransition.atEnter}
          atLeave={bounceTransition.atLeave}
          atActive={bounceTransition.atActive}
          mapStyles={mapStyles}
          className="switch-wrapper"
        >
          <Route exact path="/" component={Location} />
          <Route exact path="/tables" component={TideTables} />
        </AnimatedSwitch>
      </Router>
    )
  }
}

export default App

[maisano]

that's strange–are there any exceptions being thrown? my guess is that the components might be throwing some error right before they're supposed to unmount.

[danedavid]

@ryancoughlin could you share a working link of the error reproduced ?

[geekeren]

Any update on this issue?