如果 useEffect 中没有 setTimeout，则转换无法工作

Question

我有一个小组件，带有一些文本。

在useEffect中，我只是将元素的顶部设置为一些值。

CSS：

.box {
   display: flex;
   flex-direction: column;
   position: relative;
   top: 0;
   transition: top 0 ease-in;
}





 useEffect(() => {
   setTimeout(()=> { // with this it is working.

    const elems = document.getElementsByClassName("box");
    
    [...elems].forEach(function (e) {
   
      e.style.top =`-200px`; // without settimeout transition is not working
  
    });
    });
  }, []);

我的标记：

  <div className='progress'>
       <div className='box' />
       <div className='box' />
       <div className='box' />
  </div>

现在，当我频繁刷新时，我会看到转换发生了几次，但不是每次都发生。

但是当我将代码包装在 setTimeout 中时，我每次都会看到一个转换。

我不知道为什么会发生这种情况。

Answer 1

在转换到新状态之前，浏览器可能没有时间应用初始状态。setTimeout 引入了延迟，让浏览器有时间应用初始状态，然后转换到新状态。

import React, { useEffect } from 'react';

const YourComponent = () => {
    useEffect(() => {
        setTimeout(() => {
            const elems = document.getElementsByClassName("box");

            [...elems].forEach(function (e) {
                e.style.top = "-200px";
            });
        }, 0); 
    }, []); 

    return (
        <div className="box">
            {/* Your component content */}
        </div>
    );
};

export default YourComponent;