我正在嘗試創建一個影片，其中文本出現在螢屏上，并且可以選擇使用超時來延遲影片。
奇怪的是，當應用程式第一次在瀏覽器上呈現時，它按預期作業，但是如果我手動重繪 “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} />
uj5u.com熱心網友回復：
使用 clearTimeout 而不是 clearInterval。確保超時值以毫秒為單位（1000、2000、3500 ...）如果沒有應用 css 規則或變數值，則很難提供幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/431322.html
標籤：javascript 反应 动画 反应钩子 设置超时
上一篇：VBA訪問使用通配符獲取檔案名
下一篇：使用matplotlib影片點