Tengo dos cosas separadas en una configuración simple. Estoy usando el siguiente código:
className={router.pathname.startsWith("/pagename") ? "menu-active" : ""}para asignar la clase de menú activo al enlace de navegación del nombre de la página cuando estamos en la página del nombre de la página.
y estoy usando
<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>prácticamente textualmente de la página de documentos de transiciones de página siguiente, para tener un desvanecimiento de 450 ms a blanco entre páginas.
Aquí está el problema. Uso menu-active para cambiar el estilo de fuente del enlace de la página activa a cursiva y para cambiar su color a naranja. Pero cuando cambias de página, parece que la clase se aplica antes de que ocurra la transición. En otras palabras, puede ver el menú cambiar antes de que ocurra el desvanecimiento a blanco.
Pensé que podía retrasar la transición en 450 ms y luego el cambio ocurriría justo cuando el desvanecimiento estaba terminando, y eso funciona bien para el cambio de color; pero no por el estilo de fuente. Dado que el estilo de fuente no funciona con el retraso de transición, estoy tratando de encontrar alguna otra forma de retrasar la aplicación de esta clase/estilo.
Tal vez estoy haciendo todo esto mal sin embargo. ¿Alguna recomendación?
EDITAR: para ser claros, de ninguna manera estoy casado con el uso next-page-transitions , así que siéntase libre de recomendar otra cosa para hacer lo que quiero hacer.
Puede intentar crear dos componentes diferentes, serán iguales pero con una familia de fuentes diferente. por eso, podrá establecer un tiempo de espera de 450 ms para que los componentes cambien entre ellos, y esto le dará la solución deseada.
Esto es un poco sucio, pero atm eso es lo que logré pensar, ya que agregar transición a las fuentes es problemático.
Actualizaré si se me ocurren nuevas ideas.
Editar:
Hice un pequeño ejemplo de código para ti. Utilicé componentes con estilo, es como CSS normal, solo que tiene un estilo de código diferente, es muy fácil convertirlo a CSS normal. Y usé ganchos de reacción, para useState y useEffect. lea sobre esto si no lo entiende, es importante saber esto para codificar en reaccionar.
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>; };aquí caja de arena:
https://codesandbox.io/s/strange-yonath-dp4w5?file=/src/App.js