diff --git a/CHANGELOG.md b/CHANGELOG.md index 6ff5b12..7c9d9d3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,15 @@ + +### 1.2.1 (2015-03-23) + + + +## 1.2.0 (2015-03-23) + +#### Features + +* add animation duration option ([e1ef7983](https://github.com/craigmdennis/animatecss/commit/e1ef7983c25fec49254611ca4e19a88e5f4b1422)) + + ### 1.1.5 (2014-05-27) diff --git a/README.md b/README.md index 39d6eda..ff58df4 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,7 @@ $(document).ready( function(){ infinite: false, // True or False animationClass: "animated", // Can be any class delay: 0 // Can be any value (in ms) + duration: 1000 // Can be any value (in ms) callback: // Any function } ``` @@ -75,6 +76,11 @@ $('#your-id').animateCSS('fadeIn', { }); ``` +### With duration (in ms) +```js +$('#your-id').animateCSS('fadeIn', {duration: 3000}); +``` + ### Chain multiple animations If you use the standard jQuery chaining mechanism, each animation will fire at the same time so you have to include the next animation in the callback. ```js diff --git a/animateCSS.jquery.json b/animateCSS.jquery.json index 781ff1c..c10e1db 100644 --- a/animateCSS.jquery.json +++ b/animateCSS.jquery.json @@ -2,7 +2,7 @@ "name": "animateCSS", "title": "Animate CSS jQuery Plugin", "description": "A jQuery plugin to dynamically apply animate.css animations with callbacks", - "version": "1.1.5", + "version": "1.2.1", "homepage": "https://github.com/craigmdennis/animateCSS.git", "author": { "name": "Craig Dennis", diff --git a/bower.json b/bower.json index e18288a..b04df3b 100644 --- a/bower.json +++ b/bower.json @@ -2,7 +2,7 @@ "name": "animateCSS", "description": "A jQuery plugin to dynamically apply animate.css animations with callbacks", "main": "dist/jquery.animatecss.js", - "version": "1.1.5", + "version": "1.2.1", "dependencies": { "animate.css": "~3.1.1" }, diff --git a/dist/jquery.animatecss.js b/dist/jquery.animatecss.js index 7844104..be4b6c4 100644 --- a/dist/jquery.animatecss.js +++ b/dist/jquery.animatecss.js @@ -1,6 +1,6 @@ -/*! animateCSS - v1.1.5 - 2014-05-27 +/*! animateCSS - v1.2.1 - 2015-10-18 * https://github.com/craigmdennis/animateCSS -* Copyright (c) 2014 Craig Dennis; Licensed MIT */ +* Copyright (c) 2015 Craig Dennis; Licensed MIT */ (function() { 'use strict'; @@ -10,13 +10,14 @@ $.fn.extend({ animateCSS: function(effect, options) { - var addClass, animate, callback, complete, init, removeClass, settings, transitionEnd, unhide; + var addClass, animate, callback, complete, init, removeClass, setDuration, settings, transitionEnd, unhide; settings = { effect: effect, delay: 0, animationClass: 'animated', infinite: false, callback: options, + duration: 1000, debug: false }; transitionEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; @@ -29,6 +30,7 @@ settings.animationClass += ' infinite'; } return setTimeout(function() { + setDuration(element); unhide(element); addClass(element); return complete(element); @@ -48,6 +50,14 @@ removeClass = function(element) { return element.removeClass(settings.effect + ' ' + settings.animationClass); }; + setDuration = function(element) { + return element.css({ + '-webkit-animation-duration': settings.duration + 'ms', + '-moz-animation-duration': settings.duration + 'ms', + '-o-animation-duration': settings.duration + 'ms', + 'animation-duration': settings.duration + 'ms' + }); + }; callback = function(element) { if (settings.infinite === false) { removeClass(element); @@ -57,7 +67,8 @@ } }; complete = function(element) { - return element.one(transitionEnd, function() { + return element.one(transitionEnd, function(event) { + event.stopPropagation(); return callback(element); }); }; diff --git a/dist/jquery.animatecss.min.js b/dist/jquery.animatecss.min.js index ee50a6c..8427783 100644 --- a/dist/jquery.animatecss.min.js +++ b/dist/jquery.animatecss.min.js @@ -1,5 +1,5 @@ -/*! animateCSS - v1.1.5 - 2014-05-27 +/*! animateCSS - v1.2.1 - 2015-10-18 * https://github.com/craigmdennis/animateCSS -* Copyright (c) 2014 Craig Dennis; Licensed MIT */ +* Copyright (c) 2015 Craig Dennis; Licensed MIT */ -(function(){"use strict";var a;a=jQuery,a.fn.extend({animateCSS:function(b,c){var d,e,f,g,h,i,j,k,l;return j={effect:b,delay:0,animationClass:"animated",infinite:!1,callback:c,debug:!1},k="webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",j=a.extend(j,c),h=function(a){return e(a)},e=function(a){return j.infinite===!0&&(j.animationClass+=" infinite"),setTimeout(function(){return l(a),d(a),g(a)},j.delay)},d=function(a){return a.addClass(j.effect+" "+j.animationClass+" ")},l=function(a){return"hidden"===a.css("visibility")&&a.css("visibility","visible"),a.is(":hidden")?a.show():void 0},i=function(a){return a.removeClass(j.effect+" "+j.animationClass)},f=function(a){return j.infinite===!1&&i(a),"function"==typeof j.callback?j.callback.call(a):void 0},g=function(a){return a.one(k,function(){return f(a)})},this.each(function(){return h(a(this))})}})}).call(this); \ No newline at end of file +(function(){"use strict";var a;a=jQuery,a.fn.extend({animateCSS:function(b,c){var d,e,f,g,h,i,j,k,l,m;return k={effect:b,delay:0,animationClass:"animated",infinite:!1,callback:c,duration:1e3,debug:!1},l="webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",k=a.extend(k,c),h=function(a){return e(a)},e=function(a){return k.infinite===!0&&(k.animationClass+=" infinite"),setTimeout(function(){return j(a),m(a),d(a),g(a)},k.delay)},d=function(a){return a.addClass(k.effect+" "+k.animationClass+" ")},m=function(a){return"hidden"===a.css("visibility")&&a.css("visibility","visible"),a.is(":hidden")?a.show():void 0},i=function(a){return a.removeClass(k.effect+" "+k.animationClass)},j=function(a){return a.css({"-webkit-animation-duration":k.duration+"ms","-moz-animation-duration":k.duration+"ms","-o-animation-duration":k.duration+"ms","animation-duration":k.duration+"ms"})},f=function(a){return k.infinite===!1&&i(a),"function"==typeof k.callback?k.callback.call(a):void 0},g=function(a){return a.one(l,function(b){return b.stopPropagation(),f(a)})},this.each(function(){return h(a(this))})}})}).call(this); \ No newline at end of file diff --git a/package.json b/package.json index 3458ffd..aca9512 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "animateCSS", - "version": "1.1.5", + "version": "1.2.1", "description": "Animate CSS jQuery Plugin", "keywords": [ "jquery-plugin", diff --git a/src/animatecss.coffee b/src/animatecss.coffee index 46316a6..dd0aa93 100644 --- a/src/animatecss.coffee +++ b/src/animatecss.coffee @@ -16,6 +16,7 @@ $.fn.extend animationClass: 'animated', infinite: false callback: options + duration: 1000 debug: false # Vendor prefixed transition callbacks @@ -35,6 +36,7 @@ $.fn.extend # Run a timer regardless of delay (as 0 will fire instantly anyway) setTimeout -> + setDuration( element ) unhide( element ) addClass( element ) complete( element ) @@ -53,20 +55,28 @@ $.fn.extend removeClass = ( element ) -> element.removeClass( settings.effect + ' ' + settings.animationClass ) + # Add an animation duration + setDuration = ( element ) -> + element.css + '-webkit-animation-duration': settings.duration + 'ms', + '-moz-animation-duration': settings.duration + 'ms' + '-o-animation-duration': settings.duration + 'ms' + 'animation-duration': settings.duration + 'ms' + callback = ( element ) -> # Only remove the animation classes if `infinite` is false removeClass( element ) if settings.infinite == false # Check if the callback is a function if typeof settings.callback == 'function' - # Execute the callback and return the origin element as `this` + # Execute the callback and return the original element as `this` settings.callback.call( element ) # Event triggered when the animation has finished complete = ( element ) -> - element.one( transitionEnd, -> + element.one transitionEnd, (event) -> + event.stopPropagation() callback( element ) - ) # Maintain chainability return @each () ->