Minimal angular.js implementation of slide-to-side animations
It is angular.js module implementing simplest CSS transition-based slide animations. It is free of specific for jQuery methods, totally capable to run with embedded jqLite.
This module handles computing start and end values of animating property together with applying them correctly and reporting transition end.
This module is not intended to deal with any javascript-based animations, compute intermediate values, control animation process or handle any complex animation behavior. Also, CSS animations (not transitions!) currently are not supported.
This module defines single factory object with methods executing CSS transitions on ane element (with optional done
callback).
Since this module only cares about start and end of the transtion, you must provide a CSS rule describing a transition of height
/width
explicitly for the element in interest. Once CSS transition is defined, you can call animation functions directly or use them in describing angular animations.
Note that you will probably need extra overflow: hidden
for the element in transition.
Slide down/up an element when adding/removing to DOM. This example uses ngAnimate
to incorporate this behavior with standart angular directives such as ngIf
or ngRepeat
- Define a CSS transition
.slide-down {
transition-property: height;
transition-duration: 0.3s;
transition-timing-function: ease-in;
overflow-y: hidden;
}
- Define an animation with
enter
andleave
events
angular.module('slideDown', ['ngAnimate', 'ngSlideAnimations']).animation('.slide-down',
['slideAnimations', function(slideAnimations){
return {
enter: slideAnimations.down,
leave: slideAnimations.up
}
}]);
- Use marker class with DOM-modifying directive
<div class="slide-down" ng-if="your.condition">I will appear from top to bottom</div>