在React中，如何让元素在显示时展开？

Question

请看一下这个沙箱：

https://playcode.io/1852293

想要的效果：

1. 点击按钮后，从左向右展开，出现黄色框。它看起来像一个宽度从 0 增长到 100 像素的动画。

2. 内部蓝色框不会被渲染直到其父黄色框完全展开（宽度 = 100px）。

我知道我可以让元素始终挂载，将其初始

width

设置为0，并使用

transition

来实现此效果，但它会导致一些其他问题，所以我想知道是否可以通过条件渲染来做到这一点。

提前致谢！

Answer 1

以上可以通过使用多个状态变量来管理。 您还需要两个状态变量：

1. 切换子组件显示
2. 开始和结束父组件动画（或过渡）

此外，您还可以利用此活动：

onTransitionEnd

。这将有助于仅在转换结束后显示子组件。

主要组件如下所示：

export function App(props) {
  let [isOpen, setIsOpen] = useState(false);
  const [transition,setTransition] = useState(false);
  const [showChild,setShowChild] = useState(false);
  
  function handleClick() {
    setIsOpen(!isOpen)
    setShowChild(false);
  }

  useEffect(() => {
    if(isOpen){
      setTransition(true);
    }
    else{
       setTransition(false);
    }
  },[isOpen]);

  return (
    <>
      {
        isOpen &&
        <div className={`parent ${transition ? 'slide' : 'noSlide'}`} onTransitionEnd={() => {
setShowChild(true);
        }}>
          {showChild && <div className='child'></div>}
        </div>
      }

      <button onClick={handleClick}>Click me to display the div</button>
    </>
  );
}

您可以添加这个微小的 CSS 以获得所需的效果：

.parent {
  background-color: yellow;
  width: 0px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parent.slide{
  width :100px;
  transition : width 1s ease-in;
}

有条件地，代码添加一个类

slide

并且该类具有所需的转换。

这是一个简单的演示