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 - ＆gt; B - ＆gt;当我回到A时，假动画会短暂闪烁。

Answer 1

好的，结果是动画正在应用，但div已经在屏幕外了。哎呀。如果您希望上一页具有离开动画，则在设置动画路线时，您必须添加if (!(word2 = in.nextLine().toUpperCase()).isEmpty() && word2.length() > 3){ in.close(); T_F = false; } 或类似的内容以将其保留在屏幕上。