I am currently developing a pomodoro clock using React. My goal is to have the message text (e.g. "Set a time", "Focus," etc.) and the play/reset button fade out and in when the play/reset button is pressed. So, when the play button is clicked, "Set a time" would fade out while "Focus" fades in along with the reset button once the timer starts.
Everything works smoothly in Firefox, but I am encountering issues with the fade-in effect in Chrome, even after trying to add the -webkit- prefix vendor. Additionally, in Internet Explorer, the message element resets to 0 opacity after the fade-in animation.
You can view my code and a live demo at this codesandbox link.
I am utilizing the react-transition-group library to implement transitions on elements that need to fade in and out during mounting and dismounting.
The relevant JSX code can be found at the bottom of PomodoroTimer.jsx or accessible 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>
The pertinent CSS code is located in PomodoroTimer.css or below:
.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;
}
Your assistance will be greatly appreciated!