Using the $animate Service
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.
Implementing Animation in CSS
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 Animation in JavaScript
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);
},
};
});
Animating Elements Using AngularJS
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.
Listing 25.7 service_animate.js: Implementing an AngularJS controller that implements jQuery animation using the $animation service
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 });
Listing 25.8 service_animate.html: An AngularJS template that implements buttons that change the class on an image to animate fading and resizing
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>
Figure 25.3 Implementing the $animation service in both CSS and JavaScript to animate fading and resizing an image.
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.
Listing 25.9 animate.css: CSS code that provides transition effects for the various class stages of the AngularJS animation code
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 }