如果超时持续时间太短，则在 useLayoutEffect 中反应 setTimeout 不会延迟动画

Question

我正在尝试创建一个动画，其中文本出现在屏幕上，并且可以选择使用超时来延迟动画。

奇怪的是，当应用程序首次在浏览器上呈现时，它按预期工作，但如果我手动刷新“f5”，延迟只有在超时持续时间较长时才可见，任何值低于 500 毫秒例如，其他延迟是不可见的。

我已经尝试创建自定义挂钩，使用“useEffect”和“useLayoutEffect”，但这种奇怪的行为一直在发生。

这是组件。

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;

这是应用于文本的 CSS 规则

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

以下是我使用此组件的一些情况，唯一可见延迟的组件是超时设置为 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}  />

Answer 1

使用 clearTimeout 而不是 clearInterval。确保超时值以毫秒为单位（1000、2000、3500 ...）没有应用 css 规则或变量值，很难提供帮助。

如果超时持续时间太短，则在 useLayoutEffect 中反应 setTimeout 不会延迟动画

React setTimeout inside useLayoutEffect not delaying animation if the timeout duration is too short

javascript

animation

settimeout

reactjs

react-hooks