Post
Ask Question

AngularJS From Beginning: Animation - Part Ten

I am here to continue the discussion around AngularJS. Today, we will discuss about the $animation in AngularJS. Also in case you have not had a look at our previous articles of this series, go through the following links:

In this article, we will discuss about the services that AngularJS provides for animating content changes in the Document Object Model (DOM) and for dealing with touch events.

Animating Elements

The $animate service allows you to provide transition effects when elements are added, removed, or moved in the DOM. The $animate service doesn’t define any animations itself but relies on the CSS3 animation and transition features. Animations can be a useful means of drawing the user’s attention to an important change in the layout of an application, making the transition from one state to another less jarring. Many developers treat animations as an outlet for their frustrated artistic ambition and ladle on as many as possible. The results can be annoying, especially for the user who has to endure endless special effects every time they perform a task. For a line-of-business application, where the user could be repeating the same set of actions all day, the effect is demoralizing beyond description. Animations should be subtle, brief, and quick. The goal is to draw the user’s attention to the fact that something has changed. Use animations consistently, cautiously, and—above all—sparingly.

Installing the ngAnimation Module

The $animation service is defined within an optional module called ngAnimation that must be downloaded into the angularjs folder. Go to http://angularjs.org, click Download, select the version you want and download the file. Download the angular-animate.js file into the angularjs folder.

Defining and Applying an Animation

You don’t work directly with the $animate service to apply animations. Instead, you define animations or transitions with CSS, following a special naming convention, and then apply those names as classes to elements, which also have AngularJS directives.

The Built-in Directives That Support Animation and the Names Associated with Them. The name enter is used when content is shown to the user. The name leave is used when content is hidden from the user. The name move is used when content is moved within the DOM. The names add and remove are used when content is added and removed from the DOM.

DirectiveNames
ng-repeatenter, leave, move
ng-viewenter, leave
ng-includeenter, leave
ng-switchenter, leave
ng-ifenter, leave
ng-classadd, remove
ng-showadd, remove
ng-hideadd, remove

For demonstrate the animation service in AngularJS, I write down the below program - 

app.js
  1. var testApp = angular.module('TestApp', ["ngAnimate"]);  
Index.html
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml" ng-app="TestApp">  
  3. <head>  
  4.     <title>Angular Animation</title>  
  5.     <script src="angular.js"></script>  
  6.     <script src="angular-animate.js"></script>  
  7.     <script src="app.js"></script>  
  8.     <script src="Index.js"></script>  
  9.     <style type="text/css">  
  10.         .firstSampleAnimation.ng-hide-add,  
  11.         .firstSampleAnimation.ng-hide-remove {  
  12.             -webkit-transition: 1s ease-in-out opacity;  
  13.             transition: 1s ease-in-out opacity;  
  14.             opacity: 1;  
  15.         }  
  16.   
  17.         .firstSampleAnimation.ng-hide {  
  18.             opacity: 0;  
  19.         }  
  20.     </style>  
  21. </head>  
  22. <body ng-controller="indexController">  
  23.     <h1>ngShow animation</h1>  
  24.     <button ng-click="fadeAnimation =!fadeAnimation">  
  25.         Toggle fade  
  26.     </button>  
  27.     fadeAnimation value: {{fadeAnimation}}  
  28.     <div class="firstSampleAnimation" ng-show="fadeAnimation">  
  29.         This element appears when the fadeAnimation model is true  
  30.     </div>  
  31. </body>  
  32. </html>  
Index.js
  1. testApp.controller("indexController", function ($scope) {  
  2.     $scope.fadeAnimation = false;  
  3. });  
After writing the above code, run the index.html file in browser and output will be as below,
 
 
 
 
Supporting Touch Events

The ngTouch module contains the $swipe service, which is used to improve support for touchscreen devices beyond the basic events. The events in ngTouch module provide notification of swipe gestures and a replacement for the ng-click directive, which addresses a common event problem on touch-enabled devices.

The swipe gestures are useful whenever you want to improve support for touchscreen devices. The ngTouch swipe events can be used to detect left-to-right and right-to-left swipe gestures. To avoid confusing the user, you must ensure that the actions you perform in response to these gestures are consistent with the rest of the underlying platform—or at the very least, the default web browser for that platform. For example, if the right-to-left gesture usually means “go back” in the web browser, then it is important that you do not interpret the gesture in your application in a different way.

The replacement for the ng-click directive is useful for touch-enabled browsers because they synthesize click events for compatibility for JavaScript code that has been written with mouse events in mind. Touch browsers generally wait for 300 milliseconds after the user has tapped the screen to see whether another tap occurs. If there is no second tap, then the browser generates the touch event to represent a tap and a click event to simulate a mouse—but that 300-millisecond delay is just enough of a lag to be noticeable to the user, and it can make an application appear unresponsive. The ng-click replacement in the ngTouch module doesn’t wait for a second tap and issues the click event much faster.

Installing the ngTouch Module

Go to http://angularjs.org, click Download, select the version you want and download the file. Download the angular-touch.js file into the angularjs folder.

Now for demonstrating the ngTouch module, I write down the below code - '
 
App.js
  1. var testApp = angular.module('TestApp', ["ngTouch"]);  
Touch.html
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml" ng-app="TestApp">  
  3. <head>  
  4.     <title>Angular Touch Animation</title>  
  5.     <script src="angular.js"></script>  
  6.     <script src="angular-touch.js"></script>  
  7.     <script src="app1.js"></script>  
  8.     <script src="touch.js"></script>  
  9.   
  10. </head>  
  11. <body ng-controller="indexController">  
  12.     <div class="panel panel-default">  
  13.         <div class="panel-body">  
  14.             <div class="well" ng-swipe-right="handleSwipe('left-to-right')" ng-swipe-left="handleSwipe('right-to-left')">  
  15.                 <h2>Swipe Here</h2>  
  16.             </div>  
  17.             <div>Swipe was: {{swipeType}}</div>  
  18.         </div>  
  19.     </div>  
  20. </body>  
  21. </html>  
Touch.js
  1. testApp.controller("indexController", function ($scope, $element) {  
  2.     $scope.swipeType = "<None>";  
  3.     $scope.handleSwipe = function (direction) {  
  4.         $scope.swipeType = direction;  
  5.     }  
  6. });  
Now, run the touch.html file in browser and output as below,

 


Similar Articles