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 样式具有动画效果。如果我在路线之间快速单击，离开动画会显示，但对于之前的路线。 IE。如果我去 A -> B -> A 当我回到 A 离开动画会短暂闪烁。

Answer 1

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

ReactCSSTransitionGroup 离开动画不工作

ReactCSSTransitionGroup leave animation not working

css

reactjs

reactcsstransitiongroup