Question

我正在使用React中的番茄钟，我想要消息文本（例如“设置时间”，“焦点”等）和播放/重置按钮淡出并在播放/重置时按下按钮。所以按下播放按钮会淡出“设置时间”，然后播放按钮会在定时器启动后淡入“对焦”和重置按钮。

这在Firefox中运行良好，但即使我尝试添加-webkit-前缀供应商，淡入也无法在Chrome中正常运行。我还注意到在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;
}

但是，淡入淡出和淡入淡出类根据以下代码中定义的时间应用于元素：

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

此处定义的类根据此处定义的时间应用和删除。因此，即使您将cms动画持续时间设为5000毫秒，也可以使用transitionEnterTimeout = {500}和transitionLeaveTimeout = {500}。因此，这些课程将在这段时间后删除或添加。

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

反应应用不透明度转换无法在Chrome中使用

1 个答案: