Is there a way to detect the completion of the fadeout animation before calling a function?

Question

Is there a way to detect the completion of the fadeout animation before calling a function?

I am trying to create a toast message using jQuery.

When the "show" class is appended to the div, I want the toast message to fade in and then fade out after a few seconds.

Once the fade-out animation is complete, I need to remove the "show" class.

This is my first attempt at writing this code.

var showToast = function(msg) {
     clearTimeout(window.timeoutToast);

     $("toastDiv p").html(msg);
     $("toastDiv").addClass("show");
     window.timeoutToast = setTimeout(function() {
         $("toastDiv").removeClass("show")
     }, 3000);
 };

I have tried calling clearTimeoutFunc and removing the show class.

However, if I click multiple times quickly, the toast message fades out and then immediately reappears.

I also attempted to use $("toastDiv").on("animationed webkitAnimationEnd oAnimationEnd MSAnimationEnd", function() { ... }) but the function was triggered when the fade-in animation finished.

Here is my HTML code:

<div class="toastDiv">
    <p class="txt_toast">blablabla</p>
</div>

And here is my CSS:

.toastDiv.show{
     visibility: visible;
     -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
     animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

Please help me fix my code...

javascript jquery css webkit

Answer 1

Answer №1

Here is an improved solution using only JavaScript:

var displayToast = function(message) {
  clearTimeout(window.timeoutToast);

  $(".toastMessage p").html(message);
  $(".toastMessage").addClass("show");

  $(".toastMessage").on('animationend', function(event) {
    var animationName = event.originalEvent.animationName;
    if (animationName === 'fadeout') {
      $(".toastMessage").removeClass("show");
    }
  });
};

displayToast('Hello, toast!');

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.toastMessage {
  visibility: hidden;
}

.toastMessage.show{
     visibility: visible;
     -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
     animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toastMessage">
  <p class="toastText">sample message</p>
</div>

Answer 2

Here is an improved solution using only JavaScript:

var displayToast = function(message) {
  clearTimeout(window.timeoutToast);

  $(".toastMessage p").html(message);
  $(".toastMessage").addClass("show");

  $(".toastMessage").on('animationend', function(event) {
    var animationName = event.originalEvent.animationName;
    if (animationName === 'fadeout') {
      $(".toastMessage").removeClass("show");
    }
  });
};

displayToast('Hello, toast!');

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.toastMessage {
  visibility: hidden;
}

.toastMessage.show{
     visibility: visible;
     -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
     animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toastMessage">
  <p class="toastText">sample message</p>
</div>

Is there a way to detect the completion of the fadeout animation before calling a function?

Answer №1

Similar questions

Turn off smooth scrolling in Bootstrap 5 using HTML and CSS techniques

What is the best way to obtain the present date in Nuxt directly from the server?

What is the best way to adjust the height of a div element according to the width of its child element?

Is it possible to adjust the position of a h2 heading on a particular webpage using CSS?

The compatibility between Babel 7 and the preset-es2015 is not very reliable

Using regular expressions to identify the presence of "&", parentheses, and consecutive letters in a string

Using jQuery Mobile to dynamically load content into a specific div element

HTML5 Dragend event failed to trigger in Firefox

What is the best way to add JSON data to a table?

Issues with radio buttons not functioning or being able to be selected in Internet Explorer

Trigger the scrolling of one div when another div is scrolled

Attempting to transmit checkbox data in jade

Having issues with templateURL not working in AngularJS routeProvider

What is the process for adjusting the color of a mat-divider?

I'm noticing that my Tailwind styles don't take effect until I redefine them. What could be causing

Transfer numerical values from PHP to JavaScript using individual files

Using jQuery to retrieve the element that triggers a function

Step-by-step guide for importing a JSON file in React typescript using Template literal

React: Issue with input values not correctly updating across multiple fields when changing state toggles

Minimize the gap between legend text and icon in Highchart