延迟路由器路径名，直到完成下一页转换

Question

在一个简单的设置中，我有两个不同的事情发生。我正在使用以下代码：

className={router.pathname.startsWith("/pagename") ? "menu-active" : ""}

当我们在 pagename 页面上时，将 menu-active 类分配给 pagename nav 链接。

我正在使用

        <PageTransition timeout={450} classNames="page-transition">
      <Component {...pageProps} key={router.route} />
        </PageTransition>
        <style jsx global>{`
          .page-transition-enter {
            opacity: 0;
          }
          .page-transition-enter-active {
            opacity: 1;
            transition: opacity 450ms;
          }
          .page-transition-exit {
            opacity: 1;
          }
          .page-transition-exit-active {
            opacity: 0;
            transition: opacity 450ms;
          }
        `}</style>

next-page-transitions 文档页面中的几乎一字不差，页面之间有 450 毫秒的渐变为白色。

这就是问题所在。我使用 menu-active 将活动页面链接的字体样式更改为斜体，并将其颜色更改为橙​​色。但是当您更改页面时，似乎在转换发生之前应用了该类。换句话说，您甚至可以在淡出为白色之前看到菜单更改。

我想我可以将转换延迟 450 毫秒，然后在淡入淡出完成时发生变化，这对于颜色变化很有效；但不适用于字体样式。由于字体样式不适用于过渡延迟，我正在尝试找出其他方法来延迟此类/样式的应用。

也许我做错了。有什么建议吗？

编辑：明确地说，我绝不会使用next-page-transitions，所以请随意推荐其他东西来做我想做的事。

Answer 1

您可以尝试创建两个不同的组件，它们将是相同的但具有不同的字体系列。这样，您将能够将组件设置为 450 毫秒，以便在组件之间进行更改，这将为您提供所需的解决方案。

这有点脏，但是我设法想到的是 atm，因为向字体添加过渡是有问题的。

如果有新想法会更新

编辑：

我为你做了一个小代码示例。我使用了 styled-components，它就像普通的 css 一样，只是有不同的代码风格，很容易将它转换为普通的 css。 我使用了 react-hooks，用于 useState 和 useEffect。如果您不明白，请阅读它，了解这一点很重要，以便在反应中编写代码。

const FontX = styled.p`
  font-family: 'Andale Mono';
`;

const FontY = styled.p`
  font-family: Arial;
`;

const Container = () => {
  const [Component, setComponent] = useState(FontX);

  useEffect(() => {
    setTimeout(() => {
      setComponent(FontY);
    }, 450);
  }, []);

  return <Component>Look here! Font will change after 450ms</Component>;
};

这里是沙盒：

https://codesandbox.io/s/strange-yonath-dp4w5?file=/src/App.js