The $animate
service provides animation detection hooks you can use when performing enter, leave, and move DOM operations as well as addClass
and removeClass
operations. You can use these hooks either through CSS classnames or through the $animate
service in JavaScript.
To implement animation, you need to add a directive that supports animation to the element that you want to animate. Table 25.3 lists the directives that support animation and the types of animation events that they support.
To implement animation in CSS, you need to include the ngClass
directive in the element that you want to animate. AngularJS uses the ngClass
value as a root name for additional CSS classes that will be added and removed from the element during animation.
An animation event is called on an element with an ngClass
directive defined. Table 25.4 lists the additional classes that are added and removed during the animation process.
To implement CSS-based animations, all you need to do is add the appropriate CSS transition code for the additional classes listed in Table 25.4. To illustrate this, the following snippet implements add class and remove class transitions for a user-defined class named .img-fade
that animates changing the opacity
of the image to .1
for a two-second duration:
.img-fade-add, .img-fade-remove {
-webkit-transition:all ease 2s;
-moz-transition:all ease 2s;
-o-transition:all ease 2s;
transition:all ease 2s;
}
.img-fade, .img-fade-add.img-fade-add-active {
opacity:.1;
}
Notice that the transitions are added to the .img-fade-add
and .img-fade-remove
classes, but the actual class definition is applied to .img-fade
. You also need the class definition .img-fade-add.img-fade-add-active
to set the ending state for the transition.
Implementing AngularJS CSS animation is very simple, but you can also implement animation in JavaScript using jQuery. JavaScript animations provide more direct control over your animations. Also, JavaScript animations do not require a browser to support CSS3.
To implement animation in JavaScript, you need to include the jQuery library in your template before the angular.js
library is loaded. For example:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
Note
Including the full jQuery library is necessary if you want to be able to utilize the full features of jQuery animation. If you do decide to include the jQuery library make certain that it is loaded before the AngularJS library in your HTML code. This will eliminate the risk of the jQuery library overwriting variables necessary for AngularJS to function properly.
You also need to include the ngAnimate
dependency in your application Module
object definition. For example:
var app = angular.module('myApp', ['ngAnimate']);
You can then use the animate()
method on your Module
object to implement animations. The animate()
method returns an object that provides functions for the enter
, leave
, move
, addClass
, and removeClass
events that you want to handle. These functions are passed the element to be animated as the first parameter. You can then use the jQuery animate()
method to animate an element.
The jQuery animate()
method uses the following syntax, where cssProperties
is an object of CSS attribute changes, duration
is specified in milliseconds, easing
is the easing method, and callback
is the function to execute when the animation completes:
animate(cssProperties, [duration], [easing], [callback])
For example, the following code animates adding the fadeClass
class to an element by setting opacity
to 0
:
app.animation('.fadeClass', function() {
return {
addClass : function(element, className, done) {
jQuery(element).animate({ opacity: 0}, 3000);
},
};
});
Listings 25.7, 25.8, and 25.9 implement a basic animation example that applies a fade in/out animation to an image, using the JavaScript method, and uses CSS transition animation to animate resizing the image.
Listing 25.7 contains the AngularJS controller and animation code. Notice that the same class .fadeOut
is used to apply both the fade in and fade out animations by hooking into the addClass
and removeClass
events.
Listing 25.8 implements the AngularJS template that supports the animation. Notice that line 5 loads the jQuery library to support the JavaScript animation code. Also, line 6 loads the animate.css
script that contains the transition animations shown in Listing 25.9. The buttons simply add and remove the appropriate classes to initiate the animations.
Listing 25.9 provides the necessary transition CSS definitions for the add
and remove
classes that get implemented during the animation process. Figure 25.3 shows the results.
01 var app = angular.module('myApp', ['ngAnimate']);
02 app.controller('myController', function($scope ) {
03 $scope.myImgClass = 'start-class';
04 });
05 app.animation('.fadeOut', function() {
06 return {
07 enter: function(element, parentElement, afterElement, doneCallback){},
08 leave: function(element, doneCallback) {},
09 move: function(element, parentElement, afterElement, doneCallback){},
10 addClass: function(element, className, done) {
11 jQuery(element).animate({ opacity: 0}, 3000);
12 },
13 removeClass : function(element, className, done) {
14 jQuery(element).animate({ opacity: 1}, 3000);
15 }
16 };
17 });
01 <!doctype html>
02 <html ng-app="myApp">
03 <head>
04 <title>AngularJS $animate Service</title>
05 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
06 <link rel="stylesheet" href="/css/animate.css">
07 </head>
08 <body>
09 <div ng-controller="myController">
10 <h3>Image Animation:</h3>
11 <input type="button" ng-click="myImgClass='fadeOut'" value="Fade Out"/>
12 <input type="button" ng-click="myImgClass=''" value="Fade In"/>
13 <input type="button" ng-click="myImgClass='shrink'" value="Small"/>
14 <input type="button" ng-click="myImgClass=''" value="Big"/>
15 <hr>
16 <img ng-class="myImgClass" src="/images/arch.jpg" />
17 </div>
18 <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
19 <script src="http://code.angularjs.org/1.2.9/angular-animate.min.js"></script>
20 <script src="/js/service_animate.js"></script>
21 </body>
22 </html>
Note
You can also download the angular-animate.js file from the AngularJS website at http://code.angularjs.org/<version>/ where <version> is the version of AngularJS that you are using. You may also need to download the angular-animate.min.js.map file as well depending on which version of AngularJS you are using.
01 .shrink-add, .shrink-remove {
02 -webkit-transition:all ease 2.5s;
03 -moz-transition:all ease 2.5s;
04 -o-transition:all ease 2.5s;
05 transition:all ease 2.5s;
06 }
07 .shrink,
08 .shrink-add.shrink-add-active {
09 height:100px;
10 }
11 .start-class,
12 .shrink-remove.shrink-remove-active {
13 height:400px;
14 }