I have two separate things going on in a simple setup. I am using the following code:
className={router.pathname.startsWith("/pagename") ? "menu-active" : ""}
to assign the menu-active class to the pagename nav link when we're on the pagename page.
And I am using
<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>
pretty much verbatim from the next-page-transitions docs page, to have a 450ms fade to white between pages.
Here's the problem. I use menu-active to change the font-style of the active page link to italics, and to change its color to orange. But when you change pages, it seems that the class is applied before the transition happens. In other words, you can see the menu change before the fade out to white even occurs.
I figured I could delay the transition by 450ms and then the change would happen right as the fade was finishing, and that works fine for the color change; but not for the font style. Since font style doesn't work with transition-delay, I am trying to figure out some other way to delay the application of this class/style.
Perhaps I'm going about this all wrong though. Any recommendations?
EDIT: to be clear, I'm in no way married to using next-page-transitions, so feel free to recommend something else for doing what I want to do.
You can try creating two different components, they will be the same but with different font family. by that, you will be able to setTimeout of 450ms for the components to change between them, and this will give you the desired solution.
This is a bit dirty, but atm thats what I managed to think about as adding transition to fonts is problematic.
Will update if any new ideas come to mind
Edit:
I made a small code example for you. i used styled-components, its just like regular css just has different code style, its very easy to convert it to regular css. And i used react-hooks, for the useState and useEffect. please read about it if you dont understand, its important to know this in order to code in react.
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>;
};here sandbox:
https://codesandbox.io/s/strange-yonath-dp4w5?file=/src/App.js