CODEWITHSUNDEEP
reactjsgatsbyreact-transition-group
Devin Chaves
Devin Chaves

Reputation: 175

react-transition-group/react-router jumps to top of window on route change

https://www.wealthsimple.com/en-ca/culture/

If you're scrolled any amount on an interior page and you navigate to another it quickly jumps to the top of the page and then does page transition.

I have transition-container as pos:ab. Any ideas why this happens?

Upvotes: 2

Views: 1207

Answers (1)

Devin Chaves
Devin Chaves

Reputation: 175

Here's what I landed on if anyone else has this problem. When the node exits just gather scroll position and lock it in place.

<TransitionGroup>
  <CSSTransition
    key={location.pathname}
    classNames="anim"
    timeout={{ enter: 700, exit: 700 }}
    onExit={node => {
      node.style.position = "fixed";
      node.style.top = -1 * window.scrollY + "px";
    }}
  >
    <TransitionHandler location={location}>
      <div>{children()}</div>
    </TransitionHandler>
  </CSSTransition>
</TransitionGroup>

Upvotes: 6

Related Questions