From 2b028d243ff469b40e0d33c5e7f64a6c583d6e46 Mon Sep 17 00:00:00 2001 From: Elton Mesquita Date: Mon, 29 Jan 2018 13:53:49 -0300 Subject: [PATCH] Fixes #644 --- README.md | 44 +++++++++++++++++++++++++++++++++++--------- 1 file changed, 35 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index d262c37..cacbc06 100644 --- a/README.md +++ b/README.md @@ -123,10 +123,23 @@ http://api.jquery.com/one/ --> ```javascript -$('#yourElement').one( - 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', - doSomething, -); +// See https://github.com/daneden/animate.css/issues/644 +var animationEnd = (function(el) { + var animations = { + animation: 'animationend', + OAnimation: 'oAnimationEnd', + MozAnimation: 'mozAnimationEnd', + WebkitAnimation: 'webkitAnimationEnd', + }; + + for (var t in animations) { + if (el.style[t] !== undefined) { + return animations[t]; + } + } +})(document.createElement('div')); + +$('#yourElement').one(animationEnd, doSomething); ``` [View a video tutorial](https://www.youtube.com/watch?v=CBQGl6zokMs) on how to use Animate.css with jQuery here. @@ -138,14 +151,27 @@ You can also extend jQuery to add a function that does it all for you: ```javascript $.fn.extend({ animateCss: function(animationName, callback) { - var animationEnd = - 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; + var animationEnd = (function(el) { + var animations = { + animation: 'animationend', + OAnimation: 'oAnimationEnd', + MozAnimation: 'mozAnimationEnd', + WebkitAnimation: 'webkitAnimationEnd', + }; + + for (var t in animations) { + if (el.style[t] !== undefined) { + return animations[t]; + } + } + })(document.createElement('div')); + this.addClass('animated ' + animationName).one(animationEnd, function() { $(this).removeClass('animated ' + animationName); - if (callback) { - callback(); - } + + if (typeof callback === 'function') callback(); }); + return this; }, });