Saturday, March 1, 2014

Animating AngularJS Apps: ngView

AngularJS provides a great way to create single page applications. This allows for our site to feel more and more like a native mobile application since we have a single page app. To make it feel even more native, we can add transitions and animations using ngAnimate module.
This module allows us to create beautiful looking applications. Today we’ll be looking at how to animate ng-view.

What We’ll Be Building

Let’s say we have a single page application where we want to animate the page change. Clicking on a link will slide one view out and another into view.
We’ll use:
  • ngRoute for our page routing
  • ngAnimate to create our page animations
  • CSS Animations will be applied to the pages
  • Each of our pages will have different animations when leaving or entering the view
Extreme Animations: The animations we’ll be using here are a little over the top. Animations that are subtle can be useful for your production sites, we’re just going crazy for demonstration purposes. *Animations are from this great tutorial from Codrops: A Collection of Page Transitions

How Does It Work?

Let’s take a look at how ngAnimate works. ngAnimate will add and remove CSS classes to different Angular directives based on if they are entering or leaving the view. For example, when we load up a site, whatever is populated in ng-view gets a .ng-enter class.
All we have to do is apply a CSS animation to that .ng-enter class and that will be applied upon entry.
ngAnimate Works On: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView, and ngClass
Definitely go through the ngAnimate documentation to see more of what ngAnimate can do. Now let’s see it in action.

Starting Our Application

Here are the files we’ll need.

	- index.html
	- style.css
	- app.js
	- page-home.html
	- page-about.html
	- page-contact.html

Let’s start up an index.html file. We’ll load up AngularJSngRoute, and ngAnimate. Oh and don’t forget Bootstrap for stylings.


<html>
<head>

	
	
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css">
	<link rel="stylesheet" href="style.css">
	
	
	
	<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
	<script src="app.js"></script>

</head>


<body ng-app="animateApp">

	
	
	<div class="page {{ pageClass }}" ng-view></div>
		
</body>
</html>

Here is our very simple HTML file. Load up our resources necessary, apply our Angular app, and add ng-view for our injected views.
Let’s take a look at the other files we’ll need.

	- index.html
	- style.css
	- app.js
	- page-home.html
	- page-about.html
	- page-contact.html

Our Angular Application app.js

Now we will create our Angular application with routing so that we can change pages without a page refresh. For more information on Angular routing, check out our other tutorial: Single Page Apps with AngularJS Routing and Templating.
// app.js

// define our application and pull in ngRoute and ngAnimate
var animateApp = angular.module('animateApp', ['ngRoute', 'ngAnimate']);

// ROUTING ===============================================
// set our routing for this application
// each route will pull in a different controller
animateApp.config(function($routeProvider) {

    $routeProvider

    	// home page
    	.when('/', {
    		templateUrl: 'page-home.html',
            controller: 'mainController'
    	})

    	// about page
    	.when('/about', {
    		templateUrl: 'page-about.html',
            controller: 'aboutController'
    	})

    	// contact page
    	.when('/contact', {
    		templateUrl: 'page-contact.html',
            controller: 'contactController'
    	});

});


// CONTROLLERS ============================================
// home page controller
animateApp.controller('mainController', function($scope) {
    $scope.pageClass = 'page-home';
});

// about page controller
animateApp.controller('aboutController', function($scope) {
    $scope.pageClass = 'page-about';
});

// contact page controller
animateApp.controller('contactController', function($scope) {
    $scope.pageClass = 'page-contact';
});

We have now created our application, created our routing, and created our controllers.
Each controller will have its own pageClass variable. This is applied to our ng-view in theindex.html file so that we have a different class for each page. With a different class for each page, we will be able to apply different animations to each specific page.

Views page-home.html, page-about.html, page-contact.html

These will be clean and straightforward. We just need some text for each and the links to the other pages.

<h1>Angular Animations Shenanigans</h1>
<h2>Home</h2>

<a href="#about" class="btn btn-success btn-lg">About</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>


<h1>Animating Pages Is Fun</h1>
<h2>About</h2>

<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>


<h1>Tons of Animations</h1> 
<h2>Contact</h2>

<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#about" class="btn btn-success btn-lg">About</a>

We now have our pages and they will be injected into our main index.html file with the power of Angular routing.
Now all the boring stuff is done. Our app should work and be able to change pages nicely. Now let’s get to the part we actually wanted, the animations!

Animating Our App style.css

All of the animations we will create will be with CSS. This is great because all we had to do was add ngAnimate and now, without any changes to our Angular code, we can apply CSS animations.
Two classes that ngAnimate adds to our ng-view are .ng-enter and .ng-leave. You can guess what each of those are used for.

Base Styles

Here we’ll add some base styles so that our app doesn’t look too boring.


/* make our pages be full width and full height */
/* positioned absolutely so that the pages can overlap each other as they enter and leave */
.page        {
	bottom:0; 
	padding-top:200px;
	position:absolute; 
	text-align:center;
	top:0;  
	width:100%; 
}

.page h1 	{ font-size:60px; }
.page a     { margin-top:50px; }

/* PAGES (specific colors for each page)
============================================================================= */
.page-home 		{ background:#00D0BC; color:#00907c; }
.page-about 	{ background:#E59400; color:#a55400; }
.page-contact 	{ background:#ffa6bb; color:#9e0000; }

With that, we have base styles for all three pages. As we click through our app, we can see those applied with the colors and spacing.

CSS Animations

Let’s define our animations and then we’ll look at how we can apply them to each of the pages as they enter and leave.
Vendor Prefixes: We will be using the default CSS attributes without the vendor prefixes. Thefull code will have all the vendor prefixes.
Let’s make 6 different animations. Each page will have their very own ng-enter and ng-leaveanimation.
/* style.css */
...

/* ANIMATIONS
============================================================================= */

/* leaving animations ----------------------------------------- */
/* rotate and fall */
@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); }
}

/* slide in from the bottom */
@keyframes slideOutLeft {
	to 		{ transform: translateX(-100%); }
}

/* rotate out newspaper */
@keyframes rotateOutNewspaper {
	to 		{ transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}

/* entering animations --------------------------------------- */
/* scale up */
@keyframes scaleUp {
	from 	{ opacity: 0.3; -webkit-transform: scale(0.8); }
}

/* slide in from the right */
@keyframes slideInRight {
	from 	{ transform:translateX(100%); }
	to 		{ transform: translateX(0); }
}

/* slide in from the bottom */
@keyframes slideInUp {
	from 	{ transform:translateY(100%); }
	to 		{ transform: translateY(0); }
}

With these animations all made, we will now apply them to our pages.

Entering and Leaving Animations

To apply our animations to our pages, we will just apply these animations to .ng-enter or.ng-leave.
/* style.css */
...

	.ng-enter 			{ animation: scaleUp 0.5s both ease-in; z-index: 8888; }
	.ng-leave 			{ animation: slideOutLeft 0.5s both ease-in; z-index: 9999; }

...

Now our application will animate just like that. Pages will slide out to the left when leaving and scale up when entering. We also added z-index so that the page leaving would be placed above the one entering.
Let’s look at creating page specific animations.

Page Specific Animations

We created separate Angular controllers for each of the pages. Inside of these controllers we added a pageClass and applied that to our 
. We’ll use these classes to call out a page specifically.
Instead of the .ng-enter and .ng-leave code above, let’s make them page specific.

...

	.ng-enter 		{ z-index: 8888; }
	.ng-leave 		{ z-index: 9999; }

	/* page specific animations ------------------------ */

	/* home -------------------------- */
	.page-home.ng-enter 		{ animation: scaleUp 0.5s both ease-in; }
	.page-home.ng-leave         { transform-origin: 0% 0%; animation: rotateFall 1s both ease-in; }

	/* about ------------------------ */
	.page-about.ng-enter 		{ animation:slideInRight 0.5s both ease-in; }
	.page-about.ng-leave        { animation:slideOutLeft 0.5s both ease-in; }

	/* contact ---------------------- */
	.page-contact.ng-leave      { transform-origin: 50% 50%; animation: rotateOutNewspaper .5s both ease-in; }
	.page-contact.ng-enter 		{ animation:slideInUp 0.5s both ease-in; }

...

Now each page will have its own unique enter and leave animation!

Conclusion

It’s fairly easy to add animations to your Angular application. All you have to do is load upngAnimate and create your CSS animations. Hopefully this has helped you see a couple cool things you can animate when using ng-view.
We’ll be creating other articles on how to animate with ngRepeatngSwitch, and all of its brothers.

4 comments:

oakleyses said...

jordan pas cher, chanel handbags, nike outlet, michael kors pas cher, kate spade outlet, replica watches, longchamp pas cher, nike free, jordan shoes, christian louboutin shoes, nike free run, louis vuitton outlet, oakley sunglasses, ray ban sunglasses, polo ralph lauren, ugg boots, christian louboutin uk, air max, louis vuitton outlet, ugg boots, tiffany jewelry, polo ralph lauren outlet online, burberry pas cher, prada outlet, nike air max, gucci handbags, sac longchamp pas cher, ray ban sunglasses, louboutin pas cher, louis vuitton, uggs on sale, tiffany and co, oakley sunglasses, louis vuitton outlet, ray ban sunglasses, longchamp outlet, louis vuitton, longchamp outlet, replica watches, nike roshe, polo outlet, oakley sunglasses, cheap oakley sunglasses, oakley sunglasses wholesale, christian louboutin, christian louboutin outlet, tory burch outlet

oakleyses said...

lululemon canada, nike air max, burberry outlet, oakley pas cher, burberry handbags, coach outlet store online, kate spade, michael kors outlet, michael kors, nike air force, true religion jeans, true religion outlet, michael kors, polo lacoste, nike tn, new balance, abercrombie and fitch uk, michael kors outlet, uggs outlet, michael kors outlet, ralph lauren uk, michael kors outlet online, replica handbags, coach outlet, true religion outlet, coach purses, nike free uk, sac vanessa bruno, mulberry uk, michael kors outlet online, michael kors outlet online, michael kors outlet online, north face, uggs outlet, converse pas cher, hogan outlet, nike air max uk, hollister pas cher, sac hermes, nike roshe run uk, hollister uk, nike air max uk, true religion outlet, timberland pas cher, vans pas cher, ray ban pas cher, guess pas cher, ray ban uk

oakleyses said...

ipad cases, beats by dre, iphone 6 cases, ferragamo shoes, wedding dresses, hollister clothing, p90x workout, instyler, asics running shoes, nike huaraches, hermes belt, north face outlet, s6 case, babyliss, nfl jerseys, hollister, iphone 6 plus cases, insanity workout, ralph lauren, iphone cases, iphone 6s plus cases, bottega veneta, new balance shoes, longchamp uk, iphone 6s cases, giuseppe zanotti outlet, nike roshe run, mont blanc pens, herve leger, oakley, lululemon, timberland boots, nike air max, iphone 5s cases, ghd hair, valentino shoes, louboutin, nike trainers uk, celine handbags, north face outlet, baseball bats, vans outlet, abercrombie and fitch, chi flat iron, soccer jerseys, mac cosmetics, mcm handbags, soccer shoes, jimmy choo outlet, reebok outlet

oakleyses said...

supra shoes, marc jacobs, canada goose, converse outlet, toms shoes, ugg uk, ugg pas cher, canada goose outlet, canada goose, nike air max, louis vuitton, karen millen uk, doudoune moncler, converse, louis vuitton, vans, gucci, montre pas cher, moncler outlet, canada goose uk, canada goose outlet, moncler, pandora jewelry, barbour uk, moncler outlet, juicy couture outlet, louis vuitton, canada goose, pandora uk, coach outlet, swarovski crystal, ugg,uggs,uggs canada, juicy couture outlet, links of london, louis vuitton, louis vuitton, hollister, swarovski, canada goose outlet, ray ban, moncler, ugg, barbour, ugg,ugg australia,ugg italia, replica watches, pandora charms, moncler uk, pandora jewelry, wedding dresses, canada goose jackets, hollister, lancel