Question

我的目标很简单，当组件被加载时，我想要：

一个成长的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

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

Answer 1

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

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

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

这里是完整的工作代码

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

嵌套 React CSSTransition 导致它停止工作

1 个答案: