如何修复同时加载两个组件的错误？

Question

我使用了react-router-dom和react-spring的useTransitions，为页面转场动画，不过转场动画效果不错，但是有一些bug。我想我可以用 CSS 解决它，但我不知道该怎么做。如果你知道如何解决它，如果你能帮助我，我将不胜感激。

我尝试使用 react-router-dom、react-spring、useTransitions、animated、__RouterContext

进行页面转换

没有错误信息。这是一些错误

它从下往上上升。我只是想在中心并在移动页面时提供不透明效果。

function App() {
  const { location } = useContext(__RouterContext);
  const transitions = useTransition(location, location => location.pathname, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  });
  return (
    <React.Fragment>
      <Navbar />
      {transitions.map(({ item, props, key }) => (
        <animated.div key={key} style={props}>
          <Switch location={item}>
            <Route exact path="/" component={Home} />
            <Route exact path="/profile" component={Profile} />
            <Route exact path="/about" component={About} />
            <Route exact path="/project" component={Project} />
            <Route exact path="/contact" component={Contact} />
          </Switch>
        </animated.div>
      ))}
    </React.Fragment>
  );
}

export default App;

enter image description here

Answer 1

如果没有工作示例，很难修复它。但如果我理解正确的话，你的问题是，新页面出现在旧页面下面。当旧页面消失时它会跳起来。这就是过渡工作的方式。当您希望离开和进入过渡相互重叠时，您必须使用 CSS 修复它，如您已经提到的那样。像这样：

const transitions = useTransition(location, location => location.pathname, {
  from: { opacity: 0, position: 'absolute' },
  enter: { opacity: 1 },
  leave: { opacity: 0 }
});

这是一个类似的例子：https://codesandbox.io/s/page-transition-with-react-router-and-react-spring-b07jp

如何修复同时加载两个组件的错误？

How to fix simultaneously loading two components bug?

javascript

css

reactjs

react-router

react-spring