diff --git a/README.md b/README.md index 2b90521..d1fbd83 100644 --- a/README.md +++ b/README.md @@ -27,6 +27,11 @@ Main attribute, required for directive to work, passed variable defines whether Time in seconds for animation to complete (default is 1 second). <div ng-slide-down="slideDown" duration="1.5"> + +#### timing-function +Easing function (`transition-timing-function`) to use in the animation (default is ease-in-out). + +<div ng-slide-down="slideDown" timing-function="linear"> #### lazy-render Add this attribute to prevent rendering when content is hidden. Doesn't require value. diff --git a/demo/ng-slide-down.js b/demo/ng-slide-down.js index 0b4066a..c58710f 100644 --- a/demo/ng-slide-down.js +++ b/demo/ng-slide-down.js @@ -12,8 +12,9 @@ } }; link = function (scope, element, attrs, ctrl, transclude) { - var closePromise, duration, elementScope, emitOnClose, getHeight, hide, lazyRender, onClose, openPromise, show; + var closePromise, duration, elementScope, emitOnClose, getHeight, hide, lazyRender, onClose, openPromise, show, timingFunction; duration = attrs.duration || 1; + timingFunction = attrs.timingFunction || 'ease-in-out'; elementScope = element.scope(); emitOnClose = attrs.emitOnClose; onClose = attrs.onClose; @@ -45,7 +46,7 @@ overflow: 'hidden', transitionProperty: 'height', transitionDuration: '' + duration + 's', - transitionTimingFunction: 'ease-in-out', + transitionTimingFunction: timingFunction, height: getHeight() }); return openPromise = $timeout(function () { @@ -65,7 +66,7 @@ overflow: 'hidden', transitionProperty: 'height', transitionDuration: '' + duration + 's', - transitionTimingFunction: 'ease-in-out', + transitionTimingFunction: timingFunction, height: '0px' }); if (emitOnClose || onClose || lazyRender) { diff --git a/dist/ng-slide-down.js b/dist/ng-slide-down.js index 0b4066a..c58710f 100644 --- a/dist/ng-slide-down.js +++ b/dist/ng-slide-down.js @@ -12,8 +12,9 @@ } }; link = function (scope, element, attrs, ctrl, transclude) { - var closePromise, duration, elementScope, emitOnClose, getHeight, hide, lazyRender, onClose, openPromise, show; + var closePromise, duration, elementScope, emitOnClose, getHeight, hide, lazyRender, onClose, openPromise, show, timingFunction; duration = attrs.duration || 1; + timingFunction = attrs.timingFunction || 'ease-in-out'; elementScope = element.scope(); emitOnClose = attrs.emitOnClose; onClose = attrs.onClose; @@ -45,7 +46,7 @@ overflow: 'hidden', transitionProperty: 'height', transitionDuration: '' + duration + 's', - transitionTimingFunction: 'ease-in-out', + transitionTimingFunction: timingFunction, height: getHeight() }); return openPromise = $timeout(function () { @@ -65,7 +66,7 @@ overflow: 'hidden', transitionProperty: 'height', transitionDuration: '' + duration + 's', - transitionTimingFunction: 'ease-in-out', + transitionTimingFunction: timingFunction, height: '0px' }); if (emitOnClose || onClose || lazyRender) { diff --git a/dist/ng-slide-down.min.js b/dist/ng-slide-down.min.js index 50a776a..e1c76d3 100644 --- a/dist/ng-slide-down.min.js +++ b/dist/ng-slide-down.min.js @@ -1,2 +1,2 @@ -/*! ng-slide-down 23-04-2015 */ -(function(){"use strict";angular.module("ng-slide-down",[]).directive("ngSlideDown",["$timeout",function(a){var b,c;return b=function(a,b){return void 0!==b.lazyRender?"
":"
"},c=function(b,c,d,e,f){var g,h,i,j,k,l,m,n,o,p;return h=d.duration||1,i=c.scope(),j=d.emitOnClose,n=d.onClose,m=void 0!==d.lazyRender,g=null,o=null,k=function(a){var b,d,e,f,g;for(e=0,d=c.children(),f=0,g=d.length;g>f;f++)b=d[f],e+=b.clientHeight;return""+e+"px"},p=function(){return g&&a.cancel(g),m&&(b.lazyRender=!0),a(function(){return o&&a.cancel(o),c.css({overflow:"hidden",transitionProperty:"height",transitionDuration:""+h+"s",transitionTimingFunction:"ease-in-out",height:k()}),o=a(function(){return c.css({overflow:"visible",transition:"none",height:"auto"})},1e3*h)})},l=function(){return o&&a.cancel(o),c.css({overflow:"hidden",transitionProperty:"height",transitionDuration:""+h+"s",transitionTimingFunction:"ease-in-out",height:"0px"}),j||n||m?g=a(function(){return j&&b.$emit(j,{}),n&&i.$eval(n),m?b.lazyRender=!1:void 0},1e3*h):void 0},b.$watch("expanded",function(b,d){return b?a(p):(null!=b&&(c.css({height:k()}),c[0].clientHeight),a(l))})},{restrict:"A",scope:{expanded:"=ngSlideDown"},transclude:!0,link:c,template:function(a,c){return b(a,c)}}}])}).call(this); \ No newline at end of file +/*! ng-slide-down 29-04-2015 */ +(function(){"use strict";angular.module("ng-slide-down",[]).directive("ngSlideDown",["$timeout",function(a){var b,c;return b=function(a,b){return void 0!==b.lazyRender?"
":"
"},c=function(b,c,d,e,f){var g,h,i,j,k,l,m,n,o,p,q;return h=d.duration||1,q=d.timingFunction||"ease-in-out",i=c.scope(),j=d.emitOnClose,n=d.onClose,m=void 0!==d.lazyRender,g=null,o=null,k=function(a){var b,d,e,f,g;for(e=0,d=c.children(),f=0,g=d.length;g>f;f++)b=d[f],e+=b.clientHeight;return""+e+"px"},p=function(){return g&&a.cancel(g),m&&(b.lazyRender=!0),a(function(){return o&&a.cancel(o),c.css({overflow:"hidden",transitionProperty:"height",transitionDuration:""+h+"s",transitionTimingFunction:q,height:k()}),o=a(function(){return c.css({overflow:"visible",transition:"none",height:"auto"})},1e3*h)})},l=function(){return o&&a.cancel(o),c.css({overflow:"hidden",transitionProperty:"height",transitionDuration:""+h+"s",transitionTimingFunction:q,height:"0px"}),j||n||m?g=a(function(){return j&&b.$emit(j,{}),n&&i.$eval(n),m?b.lazyRender=!1:void 0},1e3*h):void 0},b.$watch("expanded",function(b,d){return b?a(p):(null!=b&&(c.css({height:k()}),c[0].clientHeight),a(l))})},{restrict:"A",scope:{expanded:"=ngSlideDown"},transclude:!0,link:c,template:function(a,c){return b(a,c)}}}])}).call(this); \ No newline at end of file diff --git a/src/ng-slide-down.coffee b/src/ng-slide-down.coffee index c00c2d6..55f9777 100644 --- a/src/ng-slide-down.coffee +++ b/src/ng-slide-down.coffee @@ -8,6 +8,7 @@ angular.module("ng-slide-down", []).directive "ngSlideDown", ($timeout )-> link = (scope, element, attrs, ctrl, transclude) -> duration = attrs.duration || 1 + timingFunction = attrs.timingFunction || "ease-in-out" elementScope = element.scope() emitOnClose = attrs.emitOnClose onClose = attrs.onClose @@ -31,7 +32,7 @@ angular.module("ng-slide-down", []).directive "ngSlideDown", ($timeout )-> overflow: "hidden" transitionProperty: "height" transitionDuration: "#{duration}s" - transitionTimingFunction: "ease-in-out" + transitionTimingFunction: timingFunction height: getHeight() } openPromise = $timeout ()-> @@ -49,7 +50,7 @@ angular.module("ng-slide-down", []).directive "ngSlideDown", ($timeout )-> overflow: "hidden" transitionProperty: "height" transitionDuration: "#{duration}s" - transitionTimingFunction: "ease-in-out" + transitionTimingFunction: timingFunction height: '0px' } if emitOnClose || onClose || lazyRender