I'm trying to create an animation, where the text appears in the screen and have the option to delay the animation using a timeout.

The strange thing is, when the app first render on the browser, it works as intended, but if I manually refresh "f5", the delay is only visible if it's a longer timeout duration, any value lower than 500ms for example, the others the delay is no visible.

I've already tried to create a custom hook, use "useEffect" and "useLayoutEffect" but this strange behavior keep happening.

Here is the component.

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;

Here are the CSS rules applied to the text

@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;
}

Here are some cases where I use this component, the only component where the delay is visible, is the one with the timeout set as 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}  />

CodePudding user response：

Use clearTimeout instead of clearInterval. Make sure timeout value is in milliseconds (1000, 2000, 3500 ...) Without css rules applied or value of variables, it's hard to help.