Angular ngAnimate can be used to create animation effect using animation aware directives.
Usage:
<script src="angular.js">
<script src="angular-animate.js">
<script>
angular.module("app", ["ngAnimate"]);
</script>Example – animate with ng-class
This example uses ng-class to toggle presence on class on. The animation is achieved using css transition property on background-color.
<style>
.highlight { transition:1s linear all; }
.highlight.on { background-color:lightblue;}
</style>
<div ng-app="myApp" ng-controller='MyCtrl'>
<div ng-class="{on:onOff}" class="highlight" ng-init="onOff=false">
Highlight this box (with animation)
</div>
<button ng-click="onOff=!onOff">Toggle</button>
(onOff={{onOff}})
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script>
var module = angular.module('myApp', ["ngAnimate"]);
module.controller('MyCtrl', function($scope) {});
</script>
