0

我用了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;
在此处输入图像描述

4

1 回答 1

0

如果没有工作示例，很难修复它。但是，如果我理解正确，您的问题是，新页面出现在旧页面下方。当旧页面消失时它会跳起来。这就是过渡的工作方式。当您希望离开和进入过渡相互重叠时，您必须使用 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

于 2019-06-25T12:06:46.727 回答