css - 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 时，离开动画会短暂闪烁。

Answer 1

好的，原来动画正在应用，但 div 不在屏幕上。哎呀。在为路线设置动画时，如果您希望上一页具有离开动画，则必须添加一个position:absolute或类似的东西以将其保留在屏幕上。