'hide' animation is not displaying for toast

Question

I'm having some trouble getting my 'hide' animation to work for my toasts. The 'show' animation works as expected when the toast appears, but the 'hide' animation fails to display and the toast simply disappears. I can see that the classes are being added correctly when logging things out. I have also tried using an 'animationEnd' event listener but have not been able to get it to work.

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

Please add enough code to create a minimal reproducible example — DarkBee
– DarkBee, Commented Jun 18, 2024 at 5:25

SourceHeartLock · Accepted Answer · 2024-06-18 06:13:23Z

I tried your code and it seems to be running normally whether it is displayed or hidden. Is it because I misunderstood, or is there some other code interfering?

<!DOCTYPE html>
<html>
  <head>
    <title>Home</title>
  </head>
  <body>
    <div id="toast-container"></div>
    <button id="button">Show</button>
  </body>
  <style>
    #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;
      }
    }
  </style>
  <script>
    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);
    }
  </script>
  <script>
    document.getElementById("button").addEventListener("click", () => {
      showToast("Title", "Message", 5000);
    });
  </script>
</html>

I must have something else conflicting, I will re-examine my other code. Thank you for checking on this!

Collectives™ on Stack Overflow

'hide' animation is not displaying for toast

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related