reactjs - 嵌套的 ReactTransitionGroups componentWillLeaves 不会被触发

Question

我有一个顶级 ReactTransitionGroup，它的子级中的每个组件都有自己的 ReactTransitionGroup

使用 transitionAppear={true}，我能够触发子组件的 componentWillAppear

但是当父级需要动画结束时，子级 ReactTransitionGroup 似乎不知道它们应该转到 componentWillLeave

如何让父级的 componentWillLeave 告诉其子级他们需要转换出去，并且只有在完成后才回调？

理想情况下，

需要动画 -> 父动画 -> 子动画 需要动画出来 -> 子动画出来 -> 父动画出来，

Answer 1

我知道这是一个老问题，但我刚刚遇到了类似的问题并解决了。 componentWillAppear() 和 componentWillEnter() 都会阻止任何其他动画，直到调用它们的回调。确保您的 componentWillAppear 调用回调

如果您像我一样使用 TweenMax，则可以使用传递给您选择的 Tween 方法的 onComplete 属性来调用回调。

componentWillAppear(callback) {
  TweenMax.from(
    component,
    .4,
    { autoAlpha: 1, ease: Power2.eastOut, onComplete: callback }
  );
}

希望这对您或其他人有帮助。