From e1ef7983c25fec49254611ca4e19a88e5f4b1422 Mon Sep 17 00:00:00 2001 From: Craig Dennis Date: Mon, 23 Mar 2015 16:36:02 -0700 Subject: [PATCH 1/8] Feat: Add animation duration option Uses the `ms` timing property to keep it consistent with the `duration` and jQuery's `.animate()` function. --- src/animatecss.coffee | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/animatecss.coffee b/src/animatecss.coffee index 46316a6..ac99a64 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,27 @@ $.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, -> callback( element ) - ) # Maintain chainability return @each () -> From 903b6f5c6b570f4d38c7cc66e03d1fceef384ef8 Mon Sep 17 00:00:00 2001 From: Craig Dennis Date: Mon, 23 Mar 2015 16:52:32 -0700 Subject: [PATCH 2/8] Compile dist --- dist/jquery.animatecss.js | 16 +++++++++++++--- dist/jquery.animatecss.min.js | 6 +++--- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/dist/jquery.animatecss.js b/dist/jquery.animatecss.js index 7844104..8857da3 100644 --- a/dist/jquery.animatecss.js +++ b/dist/jquery.animatecss.js @@ -1,6 +1,6 @@ -/*! animateCSS - v1.1.5 - 2014-05-27 +/*! animateCSS - v1.1.5 - 2015-03-23 * 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); diff --git a/dist/jquery.animatecss.min.js b/dist/jquery.animatecss.min.js index ee50a6c..c14869f 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.1.5 - 2015-03-23 * 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(){return f(a)})},this.each(function(){return h(a(this))})}})}).call(this); \ No newline at end of file From 73cd8dbb5f928f8bee9514a9bcbe7aa1dfc8c44e Mon Sep 17 00:00:00 2001 From: Craig Dennis Date: Mon, 23 Mar 2015 16:52:47 -0700 Subject: [PATCH 3/8] Bump to 1.2.0 --- animateCSS.jquery.json | 2 +- bower.json | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/animateCSS.jquery.json b/animateCSS.jquery.json index 781ff1c..3d91a72 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.0", "homepage": "https://github.com/craigmdennis/animateCSS.git", "author": { "name": "Craig Dennis", diff --git a/bower.json b/bower.json index e18288a..df8dcc0 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.0", "dependencies": { "animate.css": "~3.1.1" }, diff --git a/package.json b/package.json index 3458ffd..584f2e4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "animateCSS", - "version": "1.1.5", + "version": "1.2.0", "description": "Animate CSS jQuery Plugin", "keywords": [ "jquery-plugin", From ee848c3c3cff5af67e5be7ca44daafc69ab0285e Mon Sep 17 00:00:00 2001 From: Craig Dennis Date: Mon, 23 Mar 2015 16:53:04 -0700 Subject: [PATCH 4/8] Docs: Update readme with new options --- CHANGELOG.md | 8 ++++++++ README.md | 6 ++++++ 2 files changed, 14 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6ff5b12..fc3d640 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ + +## 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 From 5b064af1a8e1b83c87b45904744a9d586cdec6cc Mon Sep 17 00:00:00 2001 From: Craig Dennis Date: Mon, 23 Mar 2015 17:02:06 -0700 Subject: [PATCH 5/8] Bump to version 1.2.1 Build files contained old version number --- CHANGELOG.md | 4 ++++ animateCSS.jquery.json | 2 +- bower.json | 2 +- dist/jquery.animatecss.js | 2 +- dist/jquery.animatecss.min.js | 2 +- package.json | 2 +- 6 files changed, 9 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fc3d640..7c9d9d3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ + +### 1.2.1 (2015-03-23) + + ## 1.2.0 (2015-03-23) diff --git a/animateCSS.jquery.json b/animateCSS.jquery.json index 3d91a72..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.2.0", + "version": "1.2.1", "homepage": "https://github.com/craigmdennis/animateCSS.git", "author": { "name": "Craig Dennis", diff --git a/bower.json b/bower.json index df8dcc0..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.2.0", + "version": "1.2.1", "dependencies": { "animate.css": "~3.1.1" }, diff --git a/dist/jquery.animatecss.js b/dist/jquery.animatecss.js index 8857da3..32bb217 100644 --- a/dist/jquery.animatecss.js +++ b/dist/jquery.animatecss.js @@ -1,4 +1,4 @@ -/*! animateCSS - v1.1.5 - 2015-03-23 +/*! animateCSS - v1.2.1 - 2015-03-23 * https://github.com/craigmdennis/animateCSS * Copyright (c) 2015 Craig Dennis; Licensed MIT */ diff --git a/dist/jquery.animatecss.min.js b/dist/jquery.animatecss.min.js index c14869f..8373b7a 100644 --- a/dist/jquery.animatecss.min.js +++ b/dist/jquery.animatecss.min.js @@ -1,4 +1,4 @@ -/*! animateCSS - v1.1.5 - 2015-03-23 +/*! animateCSS - v1.2.1 - 2015-03-23 * https://github.com/craigmdennis/animateCSS * Copyright (c) 2015 Craig Dennis; Licensed MIT */ diff --git a/package.json b/package.json index 584f2e4..aca9512 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "animateCSS", - "version": "1.2.0", + "version": "1.2.1", "description": "Animate CSS jQuery Plugin", "keywords": [ "jquery-plugin", From 6568697655d510ef1c4858d0a3861f0a4d24d621 Mon Sep 17 00:00:00 2001 From: martingg88 Date: Mon, 7 Sep 2015 22:29:04 +0800 Subject: [PATCH 6/8] prevent event from bubbling up. --- dist/jquery.animatecss.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/dist/jquery.animatecss.js b/dist/jquery.animatecss.js index 32bb217..bff9f22 100644 --- a/dist/jquery.animatecss.js +++ b/dist/jquery.animatecss.js @@ -67,7 +67,8 @@ } }; complete = function(element) { - return element.one(transitionEnd, function() { + return element.one(transitionEnd, function(event) { + event.stopPropagation(); return callback(element); }); }; From bcd1c9b59fe3fa7fde84fdeeef809ae00a96e7d9 Mon Sep 17 00:00:00 2001 From: Craig Dennis Date: Sat, 17 Oct 2015 01:05:28 +0100 Subject: [PATCH 7/8] Revert "prevent event from bubbling up." --- dist/jquery.animatecss.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/dist/jquery.animatecss.js b/dist/jquery.animatecss.js index bff9f22..32bb217 100644 --- a/dist/jquery.animatecss.js +++ b/dist/jquery.animatecss.js @@ -67,8 +67,7 @@ } }; complete = function(element) { - return element.one(transitionEnd, function(event) { - event.stopPropagation(); + return element.one(transitionEnd, function() { return callback(element); }); }; From ec97f4953b6cfba1e6f58940f80ad64258f26028 Mon Sep 17 00:00:00 2001 From: martingg88 Date: Sun, 18 Oct 2015 16:08:12 +0800 Subject: [PATCH 8/8] prevent event from bubbling up --- dist/jquery.animatecss.js | 5 +++-- dist/jquery.animatecss.min.js | 4 ++-- src/animatecss.coffee | 3 ++- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/dist/jquery.animatecss.js b/dist/jquery.animatecss.js index 32bb217..be4b6c4 100644 --- a/dist/jquery.animatecss.js +++ b/dist/jquery.animatecss.js @@ -1,4 +1,4 @@ -/*! animateCSS - v1.2.1 - 2015-03-23 +/*! animateCSS - v1.2.1 - 2015-10-18 * https://github.com/craigmdennis/animateCSS * Copyright (c) 2015 Craig Dennis; Licensed MIT */ @@ -67,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 8373b7a..8427783 100644 --- a/dist/jquery.animatecss.min.js +++ b/dist/jquery.animatecss.min.js @@ -1,5 +1,5 @@ -/*! animateCSS - v1.2.1 - 2015-03-23 +/*! animateCSS - v1.2.1 - 2015-10-18 * https://github.com/craigmdennis/animateCSS * 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,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(){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/src/animatecss.coffee b/src/animatecss.coffee index ac99a64..dd0aa93 100644 --- a/src/animatecss.coffee +++ b/src/animatecss.coffee @@ -74,7 +74,8 @@ $.fn.extend # Event triggered when the animation has finished complete = ( element ) -> - element.one transitionEnd, -> + element.one transitionEnd, (event) -> + event.stopPropagation() callback( element ) # Maintain chainability