In my current setup, I have two distinct elements at play. Using the code snippet below:
className={router.pathname.startsWith("/pagename") ? "menu-active" : ""}
I am able to apply the menu-active class to the pagename navigation link when we are on the pagename page.
Additionally, I have implemented the following code block which mirrors the functionality described in the next-page-transitions documentation:
<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>
This achieves a smooth 450ms fade-out effect between pages as intended.
The issue arises when transitioning between pages while using the menu-active class to update the font style of the active page link to italics and change its color to orange. It appears that the class is applied before the actual transition occurs; causing the menu change to happen prior to the white fade-out effect.
I attempted to rectify this by introducing a delay of 450ms for the transition, allowing the change to occur just as the fade completes. This solution worked well for adjusting the color but proved insufficient for modifying the font style due to the limitations of transition-delay.
As an alternative approach, I am exploring different methods to postpone the application of this class/style effectively. Any suggestions or recommendations to address this challenge?
UPDATE: Please note that I am open to alternatives beyond utilizing next-page-transitions if there are better solutions available for achieving the desired outcome.