Hide element after CSS animation with jQuery

July 11th, 2012

I’ve been working on a little personal project, and for some extra pizzazz I’ve been using Dan Eden’s wonderful animate.css - a bunch of great plug-n-play CSS animations. In this little app, I applied a bounceOut animation to a list item, but the problem was it only sets the opacity to 0. This left big gaps in the list, which means display:none; would need to be used. So I went in to the CSS file, found the animation, and at 100% added display:none; Well, turns out that doesn’t really work. So it was clearly time to break out some jQuery. I say jQuery, because the rest of the app uses it anyway. You can of course, apply this to regular Javascript too. There is an event you can listen for called animationEnd, that fires a callback whenever a CSS animation finishes. So to detect that, you can use something like this:

$("ul#mylist li").on('webkitAnimationEnd', function(){ $(this).hide(); });

Make sure to add the correct browser prefix(es). I’m only using webkit because this particular app is meant to be a mobile web app.