AngularJS Animations

3. <script src="angular.js"></script>
<script src="angular-animate.js"></script>
angular.module('app', ['ngAnimate']);

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 */

6. <div some-directive class="effect">
Setup
CSS
.effect.ng-enter
.effect.ng-leave
.effect.ng-move
.effect.ng-add
.effect.ng-remove
{
{
{
{
{
transition: 1s linear all; opacity: 0; }
... }
... }
... }
... }

7. <div some-directive class="'effect'">
Setup
CSS
Start
CSS
.effect.ng-enter-active
.effect.ng-leave-active
.effect.ng-move-active
.effect.ng-add-active
.effect.ng-remove-active
{
{
{
{
{
opacity: 1; }
... }
... }
... }
... }

8. <div some-directive class="'effect'">
Setup
CSS
Start
CSS
 Once the animation is over then both CSS
classes will be removed from the DOM.

9. .ng-hide {display: none !important;}
<ANY ng-show | ng-hide="{expression}" class="effect">...</ANY>
.effect{...}
/* transition */
.effect.ng-hide-remove, .effect.ng-hide-add{...}
/* remove or add active*/
.effect.ng-hide-remove,
.effect.ng-hide-add.ng-hide-add-active{...}
/* add or remove active*/
.effect.ng-hide-add,
.effect.ng-hide-remove.ng-hide-remove-active{...}
CSS States

10. <ANY ng-repeat ="{...}" class="effect"> ...</ANY>
CSS States
.effect.ng-enter {…}
.effect.ng-enter-active {…}
.effect.ng-leave {…}
.effect.ng-leave-active {…}
.effect.ng-move {…}
.effect.ng-move-active {…}

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) { }
};
});

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.

16. Animation in AngularJS
Ng Animate