React - fade in div, pause and fade out div - css

Question

In my React app, I am trying to fade a div in, wait a bit, and fade it back out. Everything is working great except the fade out.
My SCSS looks like this:
$orange-color: #DD7C15;
$white-color: #FFFFFF;
$black-color: #222222;
.App {
font-family: sans-serif;
text-align: center;
}
.message-banner {
position: fixed;
bottom: 0;
left: 0;
z-index: 100000;
width: 100vw;
color: $orange-color;
font-size: 4em;
text-align: center;
background-color: $white-color;
border: 2px solid $black-color;
opacity: 0.9;
animation: fadeIn 2s ease-in;
&.hide {
opacity: 0;
animation: fadeOut 2s ease-out;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 0.9;
}
}
#keyframes fadeOut {
0% {
opacity: 0.9;
}
100% {
opacity: 0;
}
}
And my relevant React code:
const showBanner = () => {
setMessageBannerText("My sweet awesome banner!!");
setTimeout(() => {
setMessageBannerText("");
}, 3000);
};
const bannerClasses =
messageBannerText === "" ? "message-banner hide" : "message-banner";
I've created a sandbox showing what I am talking about.
https://codesandbox.io/s/brave-grass-q1y6j

Answer 1

Issue :
The animation is working fine but you are removing the content setMessageBannerText(""); while the animation, so it's not visible
Solution :
So instead of making content blank, you should maintain the state for animation
1) Solution :
const steps = {
0: "", // <--- blank coz message-banner has animation itself
1: "message-banner",
2: "message-banner hide"
};
export default function App() {
const messageBannerText = "My sweet awesome banner!!";
const [animationStep, setAnimationStep] = useState(0);
const showBanner = () => {
setAnimationStep(1);
setTimeout(() => {
// setMessageBannerText(""); // <---- issue
setAnimationStep(2);
}, 3000);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={showBanner}>Show Banner</button>
<MessageBanner text={messageBannerText} classes={steps[animationStep]} />
</div>
);
}
WORKING DEMO :
2) Solution : ( with css changes, but you still need to follow above changes )
.message-banner {
position: fixed;
bottom: 0;
left: 0;
z-index: 100000;
width: 100vw;
color: $orange-color;
font-size: 4em;
text-align: center;
background-color: $white-color;
border: 2px solid $black-color;
opacity: 0;
&.animate {
opacity: 0;
animation: fadeInOut 5s ease-out;
}
}
// single animation for fade in and fade out
#keyframes fadeInOut {
0% {
opacity: 0;
}
30% {
opacity: 0.9;
}
70% {
opacity: 0.9;
}
100% {
opacity: 0;
}
}
const [show, setShow] = useState(false);
const showBanner = () => {
if (!show) { // <--- just for safe side, if animation is going on, then ignore state change
setShow(true);
setTimeout(() => {
setShow(false);
}, 5000);
}
};
const bannerClasses = show ? "message-banner animate" : "message-banner";
WORKING DEMO :

Answer 2

Hey I have edited your sandbox to achieve the result you desire:-
Changes:-
1) Added show and hide classes.
2) Introduced a boolean state for transition rather than depending on text because your message-banner div doesn't have its own height or width. We will simply let the text stay but hide the div away from the user.
3) Instead of animation, used transition since you're simply toggling between two states and you want to stick with those for rest of your application. With animation, you will have to do some more tricks for them to stick. Plus animation is useful for more complex scenario.