Create a gist now

Instantly share code, notes, and snippets.

@pc035860 /README.md
Last active Jan 28, 2016

What would you like to do?
All-you-need jQuery plugin for running css animations.

Usage

// With Animate.css
$(...).cssAnimate('animated bounce');

// Chaining animations with promise
$(...).cssAnimate('animated bounce')
.then(function (elm) {
  return $(elm).cssAnimate('animated flash');
})
.then(function () {
  return $.when(
    $(...).cssAnimate('animated fadeIn'),
    $(...).cssanimate('animated fadeOut')
  );
});

// For CSS animation that shows element,
// add `display: {show || 'inline-block'}` right before animation starts
$(hiddenElement).cssAnimate('animated fadeIn', {show: true});

// For CSS animation that hides element,
// add `display: none` right after animation ends
$(visibleElement).cssAnimate('animated fadeOut', {hide: true});
(function ($) {
var EVT_ANIMATIONEND = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd';
$.fn.cssAnimate = function (animClass, options) {
options = options || {};
var promises = [];
this.each(function () {
promises.push(
runCSSAnimation($(this), animClass, options)
);
});
return $.when.apply($, promises);
};
function runCSSAnimation($elm, animClass, options) {
var dfd = $.Deferred(), timeout;
var onAnimationend = $.proxy(function (_animClass, $evt) {
$(this).removeClass(_animClass).off(EVT_ANIMATIONEND);
clearTimeout(timeout);
if (options.hide) {
$elm.css('display', 'none');
}
dfd.resolve();
}, $elm[0], animClass);
if (options.show) {
$elm.css('display', typeof options.show === 'string' ? options.show : 'inline-block');
}
$elm.on(EVT_ANIMATIONEND, onAnimationend).addClass(animClass);
timeout = setTimeout(onAnimationend,
durationToMs($elm.css('animation-duration')) +
durationToMs($elm.css('animation-delay'))
);
return dfd.promise();
}
function durationToMs(duration) {
if (!duration) {
return 0;
}
if (duration.indexOf('ms') >= 0) {
return Number(duration.replace(/ms/, ''));
}
else if (duration.indexOf('s') >= 0) {
return Number(duration.replace(/s/, '')) * 1000;
}
return Number(duration.replace(/[a-z]/gi, ''));
}
})(jQuery);
(function($){var EVT_ANIMATIONEND="animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd";$.fn.cssAnimate=function(animClass,options){options=options||{};var promises=[];this.each(function(){promises.push(runCSSAnimation($(this),animClass,options))});return $.when.apply($,promises)};function runCSSAnimation($elm,animClass,options){var dfd=$.Deferred(),timeout;var onAnimationend=$.proxy(function(_animClass,$evt){$(this).removeClass(_animClass).off(EVT_ANIMATIONEND);clearTimeout(timeout);if(options.hide){$elm.css("display","none")}dfd.resolve(this)},$elm[0],animClass);if(options.show){$elm.css("display",typeof options.show==="string"?options.show:"inline-block")}$elm.on(EVT_ANIMATIONEND,onAnimationend).addClass(animClass);timeout=setTimeout(onAnimationend,durationToMs($elm.css("animation-duration"))+durationToMs($elm.css("animation-delay")));return dfd.promise()}function durationToMs(duration){if(!duration){return 0}if(duration.indexOf("ms")>=0){return Number(duration.replace(/ms/,""))}else if(duration.indexOf("s")>=0){return Number(duration.replace(/s/,""))*1e3}return Number(duration.replace(/[a-z]/gi,""))}})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment