Animate.css - Wait for animation to finish before continuing

Question

I'm currently using Animate.css for animation around the app I'm creating. I'm looking for a way to wait for the animation to finish before continuing. Here's what I thought would of worked, but doesn't. Any help is appcieated!

$("#myDiv").addClass("animated flipOutY", function() {
  return $("#myDiv").empty();
});

Answer 1

There's no cross-browser way to do this except for setting a timeout.

setTimeout($('#myDiv').empty, 500);

There are some browser-prefixed methods for this, but I think I remember them being unreliable. See this SO question: Callback on CSS transition

Answer 2

If this is about CSS animations then this

$("#myDiv").addClass("animated flipOutY")
           .on('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e) {
              $(this). ...
           });

If that animate.css uses actually transitions then you should use these events:

'transitionend webkitTransitionEnd MSTransitionEnd oTransitionEnd'