Html Question posted in
Some basic documentation can be found here.

Html – How can I make an element to fadeout after pressing a button with animate.css?

<div class="animate__animated animate__fadeInUp animate__fast" role="alert">
  <strong>${alertmsg}</strong> ${msg}
  <button type="button" class="btn-close" aria-label="Close"></button>
</div>

how can I make it to fade out after pressing the close button?

if I included both animate__fadeInUp and animate__fadeOutUp class, it will just fadeout directly.

Tags:

4

Answers


  1. 0

    You can achieve the fadeout effect using this:

    <script>
    document.querySelector('.btn-close').addEventListener('click', function() {
      const alertDiv = document.getElementById('alert');
      
      alertDiv.classList.remove('animate__fadeInUp');
      
      alertDiv.classList.add('animate__fadeOutUp');
      
      alertDiv.addEventListener('animationend', () => {
        alertDiv.remove();
      });
    });
</script>
    Login or Signup to reply.
  2. 0

    I feel you could just add and remove classes using normal DOM-manipulation for the desired effect, right?

    Here’s an example,

    <--! First your could just add id's to both the div and button -->
<div id="alertContainer" class="animate__animated animate__fadeInUp animate__fast" role="alert">
  <strong>${alertmsg}</strong> ${msg}
  <button type="button" id="closeButton" class="btn-close" aria-label="Close"></button>
</div>

<script>
  const alertContainer = document.getElementById('alertContainer');
  const closeButton = document.getElementById('closeButton');


  // Later in js, you could just remove the fadeIn animation and add fadeOut
  closeButton.addEventListener('click', function() {
    alertContainer.classList.remove('animate__fadeInUp');
    alertContainer.classList.add('animate__fadeOutUp');

    // Wait for the animation to complete before removing the alert from the DOM
    setTimeout(function() {
      alertContainer.remove();
    }, 1000);
  });
</script>

    Let me know if this helps

    Cheers

    Login or Signup to reply.
  3. 0

    This can be achieved using this:

    <!DOCTYPE html>
<html>
<head>
  <title>Alert Message</title>
  <style>
    @keyframes fadeOut {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    .animate__fadeOut {
      animation-name: fadeOut;
      animation-duration: 2s;
      animation-fill-mode: forwards;
    }
  </style>
</head>
<body>
  <script>
    let alertmsg = "Warning!";
    let msg = "This is a warning message.";

    let alertHTML = `
      <div id="alert" class="animate__animated animate__fadeInUp animate__fast" role="alert">
        <strong>${alertmsg}</strong> ${msg}
        <button id="closeButton" type="button" class="btn-close" aria-label="Close">Close</button>
      </div>
    `;

    document.body.innerHTML += alertHTML;

    document.getElementById('closeButton').addEventListener('click', function() {
      document.getElementById('alert').classList.add('animate__fadeOut');
    });
  </script>
</body>
</html>
    Login or Signup to reply.
  4. 0

    You can use JavaScript or jQuery to add the animate__fadeOutUp class to the element when the button is clicked.

    Here is an example:

    <div class="animate__animated animate__fadeInUp animate__fast" role="alert" id="alertBox">
    <strong>${alertmsg}</strong> ${msg}
    <button type="button" class="btn-close" aria-label="Close" onclick="fadeOutAlert()"></button>
</div>

    JS::

    <script>
    function fadeOutAlert() {
        var alertBox = document.getElementById('alertBox');
        alertBox.classList.remove('animate__fadeInUp');
        alertBox.classList.add('animate__fadeOutUp');
    }
</script>

    jQuery::

    $('.btn-close').click(function() {
    $('#alertBox').removeClass('animate__fadeInUp').addClass('animate__fadeOutUp');
});

    Make sure to include the jQuery library if you choose to use the jQuery version

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search