ReactCSSTransitionGroup 离开动画不起作用答案

【问题标题】：ReactCSSTransitionGroup leave animation not workingReactCSSTransitionGroup 离开动画不起作用
【发布时间】：2016-03-21 15:56:18
【问题描述】：

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

【问题讨论】：

如果你将它与路由一起使用，那么 React 可能会与键混淆。请参阅 this post 了解如何在路由中正确应用 cloneElement、子元素和键。
@wintvelt 谢谢，我已经正确设置了按键，只是被新 div 移出屏幕的旧 div 弄糊涂了。
@mrberggg 我必须实现相同的。必须在路由更改时添加页面转换。你在哪里写了代码？

标签： css reactjs reactcsstransitiongroup

【解决方案1】：

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

【讨论】：

您能否添加有关此问题以及如何解决的更多信息？
@DavidPelayo 当然。当新组件进入时，它被放置在旧元素之前，因此在页面的情况下，旧页面被下推，只有当新页面小于窗口高度时才会看到它。如果要为旧页面设置动画，则必须首先使其可见，例如通过使用position: absolute;。然后，您可以像往常一样对其进行动画处理。希望对您有所帮助。