Steps to add animations in AngularJS:
1) Start by providing the necessary dependency:
angular.module('yo', [
'ngAnimate'
]);
Make sure to include "angular-animate.min.js" in your script tag.
2) There are three ways to implement animation effects:-
a)CSS Transitions.
b) CSS Keyframe Animations
c) JavaScript Animations.
3) Select any of the above methods, for example, if your template looks like this:
<div ng-init="on=true">
<button ng-click="on=!on">Toggle On/Off</button>
<div class="my-special-animation" ng-if="on">
This content will enter and leave
</div>
</div>
To animate using CSS Transition, simply add the required class attribute in your element and apply the following css:
.my-special-animation.ng-enter {
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
background:red;
}
.my-special-animation.ng-enter.ng-enter-active {
background:blue;
}
Check out the plunker here: http://plnkr.co/edit/?p=preview
CSS Keyframe animations offer more control than Transitions and are supported by most browsers. Here's an example:
.my-special-animation.ng-enter {
-webkit-animation:0.5s red-to-blue;
animation:0.5s red-to-blue;
}
@keyframes red-to-blue {
from { background:red; }
to { background:blue; }
}
@-webkit-keyframes red-to-blue {
from { background:red; }
to { background:blue; }
}
Take a look at the Plunker demo: http://plnkr.co/edit/?p=preview
If you prefer JavaScript Animations for more advanced effects, you can define a factory-like function within your module code as shown below:
myApp.animation('.my-special-animation', function() {
return {
enter : function(element, done) {
jQuery(element).css({
color:'#FF0000'
});
jQuery(element).animate({
color:'#0000FF'
}, done);
return function(cancelled) {
if(cancelled) {
jQuery(element).stop();
}
}
},
leave : function(element, done) { done(); },
move : function(element, done) { done(); },
beforeAddClass : function(element, className, done) { done(); },
addClass : function(element, className, done) { done(); },
beforeRemoveClass : function(element, className, done) { done(); },
removeClass : function(element, className, done) { done(); },
allowCancel : function(element, event, className) {}
};
});
View the JavaScript Animation example on Plunker: http://plnkr.co/edit/?p=preview