4. Directive
Supported Animations
ngRepeat
enter, leave and move
ngView
enter and leave
ngInclude
enter and leave
ngSwitch
enter and leave
ngIf
enter and leave
ngClass
add and remove
ngShow & ngHide
add and remove
5. <ANY ... class="slide"> ... </ANY>
CSS States
.slide.ng-enter,
.slide.ng-leave {
transition: 0.5s linear all;
}
.slide.ng-enter {}
/* starting animations for enter */
.slide.ng-enter-active {} /* terminal animations for enter */
.slide.ng-leave {}
/* starting animations for leave */
.slide.ng-leave-active {} /* terminal animations for leave */
11. var myModule = angular.module('myModule', ['ngAnimate']);
ngModule.animation('.my-crazy-animation', function () {
return {
enter: function (element, done) {
//run the animation here and call done when the animation is complete
return function (cancelled) {
//this (optional) function will be called when the animation
//completes or when the animation is cancelled (the cancelled
//flag will be set to true if cancelled).
};
},
leave: function (element, done) { },
move : function (element, done) { }
};
});
12.
13. app.directive('clickAnimation', ['$animate', function ($animate) {
return {
link: function (scope, element, attrs) {
// The attrs object is where the ngAnimate attribute is defined
var animate = $animate(scope, attrs);
element.bind('click', function () {
animate.show(element);
});
}
};
}]);
Click on the element will execute the animation.
The show method reveals the element by setting the CSS
property display to block and then starts the show
animation directly after.