Css 嵌套转换导致它停止工作

我的目标很简单，加载组件时，我希望：

要生长的枝条

该div中的文本将淡入

成长很容易

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

淡入也很容易

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

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

下面是我在代码沙盒中制作的一个最小示例

---

有没有办法让这一切顺利进行？或者用另一种方法获得同样的效果（最好没有额外的依赖关系）？

没关系，算了吧。不能与其父级同时触发嵌套转换，只能在父级渲染后触发

您可能会认为可以使用内置的OnEntered回调来执行此操作，但它会抛出一个错误。但是，您可以很容易地使用像这样的useEffect

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

这是全部工作代码

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

.fade-enter {
  opacity: 0;
}

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