html - React 应用程序不透明度转换在 Chrome 中不起作用

Question

我正在 React 中制作番茄钟，我希望消息文本(例如“设置时间”、“专注”等)和播放/重置按钮在播放/重置时淡出和淡入按钮被按下。因此，按下播放按钮会淡出“设置时间”，然后播放按钮会淡入“焦点”，一旦计时器开始，就会按下重置按钮。

这在 Firefox 中工作正常，但淡入在 Chrome 中无法正常工作，即使我尝试添加 -webkit- 前缀供应商。我还注意到在 Internet Explorer 中，消息元素在淡入动画后恢复为 0 不透明度。

您可以在这个 codesandbox link 查看我的代码和现场演示.

我使用 react-transition-group library将过渡应用到我想要在卸载和安装时淡出的元素。

相关的JSX在PomodoroTimer.jsx的底部，方便看这里:

  <CSSTransitionGroup
    transitionName="fade"
    transitionEnterTimeout={500}
    transitionLeaveTimeout={500}
  >
    {!this.state.timerActive ? 
    <h3 className="message" key="set">Set a time.</h3> :
    (this.state.time < 50) ? 
    <h3 className="message" key="done">Done.</h3> : 
    this.state.timerType == "Rest" ?
    <h3 className="message" key="rest">Rest.</h3> :
    <h3 className="message" key="focus">Focus.</h3>}
  </CSSTransitionGroup>

相关的 CSS 在 PomodoroTimer.css 中，或者是这样的:

.fade-enter {
  opacity: 0;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-out;
  transition-delay: 500ms;
}

.fade-leave {
  opacity: 1;
}

.fade-leave.fade-leave-active {
  opacity: 0;
  transition: opacity 500ms ease-in;
}

请帮忙!

Answer 1

这里的问题是您正在 css 中更改动画时间，如下所示:

.fade-enter {
  opacity: 0;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 5000ms ease-out;
  transition-delay: 5000ms;
}

.fade-leave {
  opacity: 1;
}

.fade-leave.fade-leave-active {
  opacity: 0;
  transition: opacity 5000ms ease-in;
}

但是这里 fade-enter 和 fade-leave 类根据下面代码定义的时间应用于元素:

<CSSTransitionGroup
   transitionName="fade"
   transitionEnterTimeout={5000}
   transitionLeaveTimeout={5000}
>

这里应用上面定义的类，并根据这里定义的时间被删除。因此，即使您将 5000 毫秒设置为 css 动画持续时间，并且这里有 transitionEnterTimeout={500} 和 transitionLeaveTimeout={500}。因此，这些类将在这段时间后删除或添加。

因此你在两个地方保持时间相同。