Menu
Community /Pin to ProfileBookmark
@nicolasBrnxApr 08.2024 — #Hey
Yes, you can achieve a fade-in and fade-out effect using CSS animations even when toggling a class to show and hide an element
First, define CSS keyframe animations for fading in and fading out the element.
Apply the fade-in and fade-out animations to the element you want to show/hide.
Toggle the classes on your element when you start and finish processing.
Javascript / CSS Pop-Up disappearing DIV
I have an on click event which if calling another function which is posting information via fetch.
When I click my object, I want a DIV to appear saying ‘processing’ and once fetch is completed I want it to disappear.
I can easily toggle a .active class with display: none, and display: block on each class but I want it to fade in and out.
How can I do this? does animation work once i’ve removed the class?
Sign in
to post a comment1 Comments(s) ↴
0
@nicolasBrnxApr 08.2024 — #Hey Yes, you can achieve a fade-in and fade-out effect using CSS animations even when toggling a class to show and hide an element
First, define CSS keyframe animations for fading in and fading out the element.
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
Apply the fade-in and fade-out animations to the element you want to show/hide.
.processing {
animation: fadeIn 0.5s ease-in-out forwards;
}
.hidden {
animation: fadeOut 0.5s ease-in-out forwards;
}
Toggle the classes on your element when you start and finish processing.
// Start processing: Add the 'processing' class
document.getElementById('yourDiv').classList.add('processing');
// After fetch is completed: Remove the 'processing' class and add the 'hidden' class
document.getElementById('yourDiv').classList.remove('processing');
document.getElementById('yourDiv').classList.add('hidden');