I'm struggling with making the 'hide' animation work properly for my toasts. While the 'show' animation functions correctly when the toast appears, the 'hide' animation does not display and the toast simply vanishes. Despite checking that the classes are added correctly in the logs, I've also attempted to use an 'animationEnd' event listener without success.
CSS:
#toast-container {
position: fixed;
bottom: 10px;
right: 10px;
max-width: 25%;
z-index: 15;
display: flex;
flex-direction: column;
align-items: flex-end; /* Align items to the right */
}
.toast {
font-family: 'Roboto', sans-serif;
font-size: 16px;
background-color: var(--page-accent-color);
padding: 10px;
border-radius: 10px;
opacity: 0;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
display: inline-block;
margin-top: 5px;
}
.toast.show {
animation: fade-in 0.5s ease-in-out forwards;
}
.toast.hide {
animation: fade-out 0.5s ease-in-out forwards;
}
.toast-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.toast-message {}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
JavaScript:
function showToast(title = '', message, time = 5000) {
const toastContainer = document.getElementById('toast-container');
const toast = document.createElement('div');
toast.className = 'toast';
// Create title element if title is provided
if (title) {
const titleElement = document.createElement('div');
titleElement.className = 'toast-title';
titleElement.innerHTML = title;
toast.appendChild(titleElement);
}
const messageElement = document.createElement('div');
messageElement.className = 'toast-message';
messageElement.innerHTML = message;
toast.appendChild(messageElement);
toastContainer.appendChild(toast);
toast.classList.add('show');
setTimeout(() => {
toast.classList.add('hide');
}, time);
}