CODEWITHSUNDEEP
htmlcssanimate.css
ThomasWong
ThomasWong

Reputation: 13

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.

Upvotes: 0

Views: 89

Answers (4)

Tushar Jadav
Tushar Jadav

Reputation: 884

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

Upvotes: 0

Petros
Petros

Reputation: 1617

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>

Upvotes: 0

Sahaj singh
Sahaj singh

Reputation: 71

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

Upvotes: 1

Sofiyullahi Olamilekan Jamiu
Sofiyullahi Olamilekan Jamiu

Reputation: 403

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>

Upvotes: 0

Related Questions