Merge pull request #4 from maximilianschmitt/timing-function-attribute

add timing function-attribute
TheRusskiy · Apr 29, 2015 · 79623e6 · 79623e6
2 parents 54e380e + 30f6d7a
commit 79623e6
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 10 deletions.
diff --git 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).
 
 <code>&lt;div ng-slide-down=&quot;slideDown&quot; duration=&quot;1.5&quot;&gt;</code>
+
+#### timing-function
+Easing function (`transition-timing-function`) to use in the animation (default is ease-in-out).
+
+<code>&lt;div ng-slide-down=&quot;slideDown&quot; timing-function=&quot;linear&quot;&gt;</code>
 #### 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
@@ -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
@@ -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
diff --git 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