ReactCSSTransitionGroup使动画无法工作

Question

我无法让-leave动画与ReactCSSTransitionGroup一起工作。我有以下代码：

<ReactCSSTransitionGroup
  transitionName="fader"
  transitionEnterTimeout={500}
  transitionLeaveTimeout={500}>
  {React.cloneElement(children, {
    key: pathname
  })}
</ReactCSSTransitionGroup>

具有下列样式：

.fade-enter {
  opacity: 0.01;
}
.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.fade-leave {
  opacity: 1;
}
.fade-leave.fade-leave-active {
  opacity: 0.01;
  transition: opacity 500ms ease-in;
}

如果我查看DOM，-enter和-leave样式都将应用于路由更改，但只有-enter样式是动画的。如果我快速单击之间的路线，离开动画确实会显示，但以前的路线。也就是说，如果我进入A，-> B，-> A，当我回到A时，离开动画会短暂地闪烁。

Answer 1

好的，原来动画被应用了，但是div是脱离屏幕的。糟了。当动画路线，如果你想让上一页有一个离开动画，你必须添加一个position:absolute或类似的东西，以保持它在屏幕上。