Slider animation directive for AngularJS

Downloads in past


4180.4.29 years ago9 years agoMinified + gzip package size for ng-slide-down in KB


Ng Slide Down
AngularJS directive for vertical slide down animation (JS Fiddle).


Just add this module as a dependency:
angular.module("myApp", 'ng-slide-down')
You can download this module from bower using
bower install ng-slide-down


In order to use a directive add attribute ng-slide-down to an element you want to hide. Pass some variable to it as a value and it's going to serve as a trigger to expand/hide the element: lazy-render="someVariable".


Lazy rendering

Has option to prevent HTML generation of contents unless expanded (due to performance considerations). Optimal for a big number of widgets (production tested). All you need to do is to add lazy-render attribute to an element with a directive.

Automatic height adjustment

Directive watches for a height of it's content and readjusts it's size automatically - no extra work required.


ng-slide-down (required)

Main attribute, required for directive to work, passed variable defines whether element should slide down or slide up
<div ng-slide-down="slideDown">


Time in seconds for animation to complete (default is 1 second).
<div ng-slide-down="slideDown" duration="1.5">


Easing function (transition-timing-function) to use in the animation (default is ease-in-out).
<div ng-slide-down="slideDown" timing-function="linear">


Add this attribute to prevent rendering when content is hidden. Doesn't require value.
<div ng-slide-down="slideDown" lazy-render>


Expression evaluated when slider is finished closing
<div ng-slide-down="slideDown" on-close="someVariable = true">


Message emitted when slider is finished closing
<div ng-slide-down="slideDown" emit-on-close="widgetclosed">
Then you can subscribe to it in an outer scope:
$scope.on('widgetclosed', function() { / do stuff / });

Usage example

Full version can be found on JS Fiddle

<div ng-click="widgetExpanded = !widgetExpanded">
  Click to slide in/out
<div ng-slide-down="widgetExpanded" lazy-render duration="1">
  Some awesome content here

Words of caution

Lazy render may not work for older angular versions due to a bug (fixed on 20.05.2014). Make sure to update your angular.
If your content has padding or margins make sure to wrap it into div without them.

<div ng-slide-down="slideDown">
<div> <!-- wrapper -->  
... content with padding ...

Building yourself

Source code is written in CoffeeScript, in order to build it just run grunt command in your CLI and it will take care of compiling to JS and minifying.


Oh darling... You are always welcome!


This code is released under the MIT License.