将路由器pathName延迟到下一页转换完成之后。

Question

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

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

若要在分页页上将菜单活动类分配给页面名称导航链接，请执行以下操作。

我用的是

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

基本上逐字从下一页转换文档页，使450毫秒褪色为白色之间的页。

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

我想我可以推迟450毫秒的转换，然后在淡色结束的时候，改变就会发生，这对于颜色的改变很好，但对于字体的风格就不行了。由于字体样式不适用于转换延迟，所以我试图找出其他方法来延迟这个类/样式的应用程序。

不过，也许我搞错了。有什么建议吗？

编辑:要明确的是，我从来没有使用过next-page-transitions，所以可以随意推荐一些其他的东西来做我想做的事情。

Answer 1

您可以尝试创建两个不同的组件，它们将是相同的，但具有不同的字体系列。这样，您就可以为组件之间更改450 be的setTimeout，这将为您提供所需的解决方案。

这有点脏，但是atm --这是我想要增加字体转换--是有问题的。

如果有任何新的想法出现，将会更新

编辑：

我给你做了一个小代码示例。我使用了样式化的组件，它就像普通css一样有不同的代码风格，很容易将它转换成常规css。我用了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