Estoy tratando de crear una animación, donde el texto aparece en la pantalla y tengo la opción de retrasar la animación usando un tiempo de espera.

Lo extraño es que, cuando la aplicación se muestra por primera vez en el navegador, funciona según lo previsto, pero si actualizo manualmente "f5", el retraso solo es visible si es una duración de tiempo de espera más larga, cualquier valor inferior a 500 ms, por ejemplo, los demás el retraso no es visible.

Ya intenté crear un enlace personalizado, use "useEffect" y "useLayoutEffect", pero este extraño comportamiento sigue ocurriendo.

Aquí está el componente.

 const FadeInText = ({text, style, timeout, noScroll}) => { const textRef = useRef(null) const [visible, setVisible] = useState() useLayoutEffect(() => { setVisible(timeout !== undefined ? {animation: "none", opacity: 0} : {}) let time = setTimeout(() => { setVisible({}) }, timeout) return () => clearTimeout(time) },[timeout]) return <p ref={textRef} style={{...visible,...style}} className="fade-in-text">{text}</p> } export default FadeInText;

Aquí están las reglas CSS aplicadas al texto.

 @keyframes fade-slide-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fade-in-text { font-size: 1rem; color: white; animation: fade-slide-up 0.2s ease-in; }

Aquí hay algunos casos en los que uso este componente, el único componente donde el retraso es visible es el que tiene el tiempo de espera establecido en 600

 <FadeInText style={{fontSize: "5vw"}} text="R" timeout={200} /> <FadeInText style={{fontSize: "5vw"}} text="A" timeout={300} /> <FadeInText style={{fontSize: "5vw"}} text="N" timeout={400} /> <FadeInText style={{fontSize: "5vw"}} text="D" timeout={600} />