ng-slide-down
v0.4.2
Published
Slider animation directive for AngularJS
Downloads
1,194
Maintainers
Readme
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.
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>
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:
Usage example
Full version can be found on JS Fiddle
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.
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.