嵌套 React CSSTransition 导致它停止工作答案

【问题标题】：Nesting React CSSTransition causes it to stop working嵌套 React CSSTransition 导致它停止工作
【发布时间】：2021-04-22 19:00:27
【问题描述】：

我的目标很简单，当组件加载完毕后，我想要：

要成长的 div
该 div 中的文本淡入

不断增长的 div 很容易

    <CSSTransition
        in={onLoad}
        timeout={300}
        classNames="grow"
        unmountOnExit
    >
        <div className={"success-container"}></>
    </CSSTransition>

使用 CSS

.success-container {
  background: lightblue;
  width: 400px;
  height: 100px;
  transition: height 200ms, width 200ms;
}

.grow-enter {
  height: 50px;
  width: 100px;
}

淡入也很容易

    <CSSTransition
        in={onLoad}
        timeout={300}
        classNames="fade"
        unmountOnExit
    >
        <div className={"text-container"}>Here is some fading Text</>
    </CSSTransition>

使用 CSS

.text-container {
  width: 100%;
  height: 100%;
  transition: opacity 200ms;
}

.fade-enter {
  opacity: 0;
}

现在，当我将第二个转换放入第一个转换时，淡入不再发生，我不知道如何继续

这是我在代码沙箱中制作的一个最小示例

https://codesandbox.io/s/wonderful-fermi-gsz11?file=/src/styles.css

有没有办法让这个工作？或其他获得相同效果的方法（最好没有额外的依赖项）？

【问题讨论】：

标签： css reactjs react-transition-group

【解决方案1】：

没关系，想通了。您不能与其父级同时触发嵌套过渡，您只能在父级渲染后触发。

您可能认为可以使用内置的 OnEntered 回调来执行此操作，但它会引发错误。但是，您可以像这样轻松使用 useEffect

  useEffect(() => {
    if (onLoad3===true){
      setOnLoad4(true)
    } else {
      setOnLoad4(false)
    }
  }, [onLoad3]);

这是整个工作代码

https://codesandbox.io/s/determined-cdn-7kiy5

【讨论】：