更改路由时,react-transition-group / react-router跳到窗口顶部

时间:2018-08-06 16:27:27

标签: reactjs gatsby react-transition-group

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

如果在内部页面上滚动了任意数量,然后导航到另一个页面,则该页面会迅速跳至页面顶部,然后进行页面转换。

我的转换容器为pos:ab。任何想法为什么会发生这种情况?

1 个答案:

答案 0 :(得分:1)

如果有人遇到此问题,这就是我要解决的问题。当节点退出时,只需收集滚动位置并将其锁定在适当位置即可。

<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>