prawito / ng-slide-down

AngularJS directive for slide-down animation

Ng Slide Down

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

Installation

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

Usage

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".

Features

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.

Keep Alive

Additionally, if you need to keep the contents of the expand and collapse from recompiling after the initial expand takes place, adding keep-alive will prevent re-rendering of the html template. This is usefull if you are expanding / collpasing content that may contain directives / components that makes API calls on initializtion.

Automatic height adjustment

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

Options

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">

duration

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.

<div ng-slide-down="slideDown" lazy-render>

keep-alive

Add this attribute to prevent recompiling of content in the template. Useful for content that may contain addition directives / components that receive data from an API.

<div ng-slide-down="slideDown" lazy-render keep-alive>

on-close

Expression evaluated when slider is finished closing

<div ng-slide-down="slideDown" on-close="someVariable = true">

emit-on-close

Message emitted when slider is finished closing

<div ng-slide-down="slideDown" emit-on-close="widget_closed">

Then you can subscribe to it in an outer scope:

$scope.on('widget_closed', function() { /* do stuff */ });

Usage example

Full version can be found on JS Fiddle

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

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 ...
    </div>  
</div>

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.

Contributing

Oh darling... You are always welcome!

License

This code is released under the MIT License.