Book Image

Learning AngularJS Animations

By : Richard Keller
Book Image

Learning AngularJS Animations

By: Richard Keller

Overview of this book

Table of Contents (15 chapters)
Learning AngularJS Animations
About the Author
About the Reviewers

The ngView directive animation

The ngView directive is used to add a template to the main layout. It has support for animation, for both enter and leave events. It's nice to have an animation for ngView so the user has a better notion that we are switching views. For this directive sample, we need to add the ngRoute JavaScript file to the HTML and the ngRoute module as a dependency of our app.

We will create a sample that slides the content of the current view to the left, and the new view appears sliding from the right to the left too so that we can see the current view leaving and the next view appearing.

Consider the following HTML:

<!DOCTYPE html>
<html ng-app="myApp">
  <title>AngularJS ngView sample</title>
    .ngViewRelative {
      position: relative;
      height: 300px;

    .ngViewContainer {
      position: absolute;
      width: 500px;
      display: block;