首先为容器设置动画，child 其次，使用 CSSTransition

Question

使用 CSSTransition，我想首先为我的容器 div 设置动画，然后，延迟设置其 child div.

的动画

到目前为止我失败了：它们总是同时动画，无论 child 上的 transition-delay 设置如何。

在我的沙盒中查看：

https://codesandbox.io/s/boring-pare-eb2qk?file=/src/App.js

或查看下面的摘录

      <CSSTransition
        in={toggled}
        timeout={200}
        classNames="container"
        unmountOnExit
      >
        <div className="container">
          Container and its border should appear first
          <CSSTransition
            in={toggled}
            timeout={200}
            classNames="child"
            unmountOnExit
          >
            <div className="child"> Child should appear second </div>
          </CSSTransition>
        </div>
      </CSSTransition>

.container-enter {
  opacity: 0;
}
.container-enter-active {
  opacity: 1;
  transition: opacity 1s;
}

.child-enter {
  opacity: 0;
}
.child-enter-active {
  opacity: 1;
  transition: opacity 2s 5s;
}

我做错了什么？

感谢您的帮助。

Answer 1

我找到了解决方案：我必须添加道具“appear=true”并定义相关样式...

有关更多详细信息，这是我关于项目 github 的问题： https://github.com/reactjs/react-transition-group/issues/790

首先为容器设置动画，child 其次，使用 CSSTransition

Animate container first, child second, with CSSTransition

reactjs

reactcsstransitiongroup