Estoy tratando de aplicar una animación de aparición gradual global a todos los componentes de mi aplicación. Agregué el nombre de clase fadeIn a todos los elementos y configuré la opacidad en 0 de forma predeterminada. Luego uso js para cambiar eso a 1 cuando el elemento aparece a la vista.

A continuación se muestra cómo estoy aplicando esto hasta ahora. Funciona, pero hay un problema importante y estoy seguro de que no es el mejor método y, en primer lugar, me encantaría conocer métodos mejores.

El problema principal es que solo funciona en el primer render. Pero si navego a otra página y luego vuelvo, todos los elementos se ocultan con la opacidad 0 y el script no se ejecuta.

Agradezco cualquier consejo sobre cómo resolver el problema actual o una mejor manera de ejecutarlo.

_app.js

 function MyApp({ Component, pageProps }) { return <Provider store={store}> <Layout> <PersistGate persistor={persistor}> <Component {...pageProps} /> </PersistGate> <FadeIn /> </Layout> </Provider> } export default MyApp

Componente de fundido de entrada

 import React, { useEffect, useState } from 'react' import Script from 'next/script' import ReactDOM from 'react-dom'; export default function FadeIn() { const myScript = ( <Script src='/utils/scripts/appearOnScroll.js' strategy="afterInteractive" /> ) return ReactDOM.createPortal(myScript, document.getElementById('doc-root')); }

aparecerOnScroll.js

 (function () { const faders = document.querySelectorAll('.fade-in'); const faderOptions = { threshold: 1 }; const appearOnScroll = new IntersectionObserver(function ( entries, appearOnScroll ) { entries.forEach(entry => { if (!entry.isIntersecting) { return; } else { entry.target.classList.add('appear'); appearOnScroll.unobserve(entry.target); } }) }, faderOptions); faders.forEach(fader => { appearOnScroll.observer(fader); }); })();