Question

我使用了react-router-dom和react-spring的useTransitions，为页面过渡设置了动画，但是过渡动画效果很好，但是有一些错误。我想我可以用CSS解决它，但是我不知道该怎么办。如果您知道如何解决，请多多帮助。

我尝试使用react-router-dom，react-spring，useTransitions，动画，__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

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

1 个答案: