Animating AngularJS Apps with ngAnimate Directive
AngularJS is a super heroic JavaScript framework which makes creating Single Page Applications (SPA) very easy. On top of that AngularJS comes with a handful of angular modules that can be used to create an awesome user experience. In this post, we are going to see how to use popular ngAnimate to add page transitions/animations to angular views.
ngAnimate can be used with various directives like ngRepeat, ngView, ngInclude, ngIf, ngMessage, etc.
In this post, we will use animations with ngView
Here we are using Brackets IDE from Adobe, but you are free to use others, for example, Sublime Text, WebStorm from JetBrains etc.
Note: We will also use Bootswatch Bootstrap API to give our HTML pages a beautiful look
Project Structure :
Below is the project structure in Brackets IDE
Here is the short description of each file used in the project
animation.css — main CSS file where we define our page animations
bootstrap.min.css — bootswatch bootstrap for giving our <a> tags a beautiful look
config.js — main JavaScript file where we define our angular module along with routes and controllers
shellPage.html — This is the shell page in which other views will be loaded dynamically
view1.html, view2.html, view3.html — These are the partial views which will be loaded into the shellPage
How are animations applied:
ngAnimate applies CSS classes to different Angular directives depending on whether they are entering or leaving the view
.ng-enter — This CSS class applies on the directive whenever it gets loaded in the page
.ng-leave — This CSS class applies on the directive whenever it leaves the page
Let’s go through each file one by one
shellPage.html
shellPage loads the required resources, applies ng-app to body and adds ng-view to inject the views dynamically.
< html>
< head>< !-- Main CSS style where we define our animations -->
< link rel="stylesheet" href="css/animation.css">< !-- Bootswatch Bootstrap to give our pages (buttons) beautiful look -->
< link rel="stylesheet" href="css/bootstrap.min.css">< !-- JS for angular, ngRoute and ngAnimate -->
< script src="https://code.angularjs.org/1.3.0/angular.js">< /script>
< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-route.js">< /script>
< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.js">< /script>< !-- Main JS where we define our Angular Module along with routes and controllers -->
< script src="js/config.js">< /script>< /head>< body ng-app="transitionApp">< div class="view {{ cssClass }}" ng-view>< /div>< div id="heading">
< h1>Animating with ngAnimate< /h1>
< /div>< /body>< /html>
config.js
In config file, we define our angular module along with routes and controllers.
Module transitionApp have two dependencies: ngAnimate and ngRoute
var transitionApp = angular.module('transitionApp', ['ngAnimate', 'ngRoute']);transitionApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/view1.html',
controller: 'view1Controller'
})
.when('/view2', {
templateUrl: 'partials/view2.html',
controller: 'view2Controller'
})
.when('/view3', {
templateUrl: 'partials/view3.html',
controller: 'view3Controller'
});});transitionApp.controller('view1Controller', function($scope) {
$scope.cssClass = 'view1';
});transitionApp.controller('view2Controller', function($scope) {
$scope.cssClass = 'view2';
});transitionApp.controller('view3Controller', function($scope) {
$scope.cssClass = 'view3';
});
We have defined three partial views (view1, view2, view3) which will be injected into the shellpage depending on the URL. Respective Controllers sets a cssClass attribute, which is the name of CSS class, which will be applied to the ng-view. We will define our animations in these CSS classes that will load each page with different animations.
Partial pages view1.html, view2.html, view3.html
There is nothing much in partial pages, just some text and link to other views
view1.html
< h3>This is View 1< /h3>
< a href="#view2" class="btn btn-success btn-lg">View 2< /a>
< a href="#view3" class="btn btn-danger btn-lg">View 3< /a>view2.html
< h3>This is View 2< /h3>
< a href="#" class="btn btn-primary btn-lg">View 1< /a>
< a href="#view3" class="btn btn-danger btn-lg">View 3< /a>view3.html
< h3>This is View 3< /h3>
< a href="#" class="btn btn-primary btn-lg">View 1< /a>
< a href="#view2" class="btn btn-success btn-lg">View 2< /a>Remember that these three HTML files are partial pages which will be injected into shellPage.html according to the URL that we have defined in config.js file
Defining Styles and Animations :
Let’s put some life in our views by applying CSS to it
.view {
bottom:0;
padding-top:200px;
position:absolute;
text-align:center;
top:0;
width:100%;
}.view a { margin-top:50px; }
.view h1 { font-size:60px; }
#heading { color:#333; position:absolute; text-align:center; top:50px; width:100%; }/* Background and text colors for partial view pages (view1, view2, view3)
------------------------------------------------------------- */
.view1 { background:#bef2de; color:#00907c; }
.view2 { background:#D4D0EA; color:#55316f; }
.view3 { background:#FFCBA4; color:rgba(149, 95, 40, 0.91); }
To make a clean transition between different views, we will set the CSS z-index property
.view.ng-leave { z-index:9999; }
.view.ng-enter { z-index:8888; }Now it’s time to define our animations
Slide Left Animation
/* slide out left */
@keyframes slideOutLeft {
to { transform: translateX(-100%); }
}
@-moz-keyframes slideOutLeft {
to { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes slideOutLeft {
to { -webkit-transform: translateX(-100%); }
}Scale Up Animation
/* scale up */
@keyframes scaleUp {
from { opacity: 0.3; transform: scale(0.8); }
}
@-moz-keyframes scaleUp {
from { opacity: 0.3; -moz-transform: scale(0.8); }
}
@-webkit-keyframes scaleUp {
from { opacity: 0.3; -webkit-transform: scale(0.8); }
}Slide-In from Right Animation
/* slide in from the right */
@keyframes slideInRight {
from { transform:translateX(100%); }
to { transform: translateX(0); }
}
@-moz-keyframes slideInRight {
from { -moz-transform:translateX(100%); }
to { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
from { -webkit-transform:translateX(100%); }
to { -webkit-transform: translateX(0); }
}Slide-In from Bottom Animation
/* slide in from the bottom */
@keyframes slideInUp {
from { transform:translateY(100%); }
to { transform: translateY(0); }
}
@-moz-keyframes slideInUp {
from { -moz-transform:translateY(100%); }
to { -moz-transform: translateY(0); }
}
@-webkit-keyframes slideInUp {
from { -webkit-transform:translateY(100%); }
to { -webkit-transform: translateY(0); }
}Rotate and Fall Animation
/* rotate and fall */
@-webkit-keyframes rotateFall {
0% { -webkit-transform: rotateZ(0deg); }
20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; }
40% { -webkit-transform: rotateZ(17deg); }
60% { -webkit-transform: rotateZ(16deg); }
100% { -webkit-transform: translateY(100%) rotateZ(17deg); }
}
@-moz-keyframes rotateFall {
0% { -moz-transform: rotateZ(0deg); }
20% { -moz-transform: rotateZ(10deg); -moz-animation-timing-function: ease-out; }
40% { -moz-transform: rotateZ(17deg); }
60% { -moz-transform: rotateZ(16deg); }
100% { -moz-transform: translateY(100%) rotateZ(17deg); }
}
@keyframes rotateFall {
0% { transform: rotateZ(0deg); }
20% { transform: rotateZ(10deg); animation-timing-function: ease-out; }
40% { transform: rotateZ(17deg); }
60% { transform: rotateZ(16deg); }
100% { transform: translateY(100%) rotateZ(17deg); }
}Rotate out Newspaper Animation
/* rotate out newspaper */
@-webkit-keyframes rotateOutNewspaper {
to { -webkit-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
@-moz-keyframes rotateOutNewspaper {
to { -moz-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
@keyframes rotateOutNewspaper {
to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}Applying Animations :
It’s time to apply the animations that we had defined before
View 1 Animations
/* View 1 animations for page leave and enter */
.view1.ng-leave {
-webkit-animation:slideOutLeft 0.5s both ease-in;
-moz-animation:slideOutLeft 0.5s both ease-in;
animation:slideOutLeft 0.5s both ease-in;}
.view1.ng-enter {
-webkit-animation:scaleUp 0.5s both ease-in;
-moz-animation:scaleUp 0.5s both ease-in;
animation:scaleUp 0.5s both ease-in;
}
View 2 Animations
/* View 2 animations for page leave and enter */
.view2.ng-leave {
-webkit-transform-origin: 0% 0%;
-webkit-animation: rotateFall 1s both ease-in;
-moz-transform-origin: 0% 0%;
-moz-animation: rotateFall 1s both ease-in;
transform-origin: 0% 0%;
animation: rotateFall 1s both ease-in;}
.view2.ng-enter {
-webkit-animation:slideInRight 0.5s both ease-in;
-moz-animation:slideInRight 0.5s both ease-in;
animation:slideInRight 0.5s both ease-in;
}
View 3 Animations
/* View 3 animations for page leave and enter */
.view3.ng-leave {
-webkit-transform-origin: 50% 50%;
-webkit-animation: rotateOutNewspaper .5s both ease-in;
-moz-transform-origin: 50% 50%;
-moz-animation: rotateOutNewspaper .5s both ease-in;
transform-origin: 50% 50%;
animation: rotateOutNewspaper .5s both ease-in;
}
.view3.ng-enter {
-webkit-animation:slideInUp 0.5s both ease-in;
-moz-animation:slideInUp 0.5s both ease-in;
animation:slideInUp 0.5s both ease-in;
}We are done with all the changes. Now it’s time to run the application
Running the Application
On running the application, you will be presented with the below page:
Click on the links and you will see animations into play, on entering and leaving the partial pages.
There are various other animations that can be used. Also, an overwhelming set of possible effects can be here: http://tympanus.net/Development/PageTransitions/
I hope you liked the above Animation with ngAnimate article. If you wish to check out more articles on the market’s most trending technologies like Artificial Intelligence, Python, Ethical Hacking, then you can refer to Edureka’s official site.
Do look out for other articles in this series which will explain the various other aspects of Web Development.
8. PHP Tutorial
10. Top 10 JavaScript Frameworks
11. Build a CRUD Application Using Node.js and MySQL
12. Build CRUD Application using Node.JS and MongoDB
13. Build REST API with Node.js
14. Best 3 Ways to Make Node.js Requests
15. HTML vs HTML5
Originally published at www.edureka.co on June 22, 2015.
