React app opacity transition not working in Chrome

JavaScript
1

I’m working on my pomodoro clock and I want message text (ex. “Set a time”, “Focus,” etc.) and the play / reset button to fade out and in when the play / reset button is pressed. So pressing the play button would fade out “Set a time” and the play button then fade in “Focus” and the reset button once the timer starts.

This works fine in Firefox, but the fade in doesn’t work properly in Chrome, even when I try adding the -webkit- prefix vendor. I’ve also noticed in Internet Explorer the message element going back to 0 opacity after the fade-in animation.

You can checkout my code and a live demo at this codesandbox link.

I use the react-transition-group library to apply the transitions to elements I want to fade when they dismount and mount.

The relevant JSX is at the bottom of PomodoroTimer.jsx, or here for convenience:

  <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>

And the relevant CSS is in PomodoroTimer.css, or this:

.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;
}

Please help! :sweat_smile: