Use AngularJS to achieve scalable page switching

AngularJS 1.2 makes it easier to create page-to-page transitions in a single-page application by introducing pure CSS class switching and animation. With just 1 ES4en-ES5en, let's look at 1, 1 scalable method that introduces a number of different switches, and how each page specified is cut in and out.

Presentation: http: / / embed. plnkr. co/PqhvmW/preview

First, mark:

 <div class="page-container">
  <div ng-view class="page-view" ng-class="pageAnimationClass"> </div>
 </div>

Since ES20en-ES21en USES the enter/leave animation, you can simply use two ES23en-ES24en elements in DOM to cut in the new view and cut out the old view. Therefore, in page-ES26en elements using relative positioning, ng-ES28en is established using absolute positioning to support any 1 positioning switch.

'go' method

In a single-page application, we still want to enable navigation through URL and ensure that the browser's fallback and next step buttons work as expected. So once we set up our route, template, and controller (optional parse) at $routeProvider, we can use one relative path in 1 ES35en-ES36en to switch pages directly:

 <a ng-click="/page2">Go to page 2</a>

That works, but we need to hardcode ng-ES43en to specify a switch to class. Instead, let's create a 'go' method on $rootScope that lets us specify a path and a switch like this:

 <a ng-click="go('/page2', 'slideLeft')">Go to page 2</a>

Here is our $rootScope 'go' method:

$rootScope.go = function (path, pageAnimationClass) {
 
  if (typeof(pageAnimationClass) === 'undefined') { // Use a default, your choice
    $rootScope.pageAnimationClass = 'crossFade';
  }
     
  else { // Use the specified animation
    $rootScope.pageAnimationClass = pageAnimationClass;
  }
 
  if (path === 'back') { // Allow a 'back' keyword to go to previous page
    $window.history.back();
  }
     
  else { // Go to the specified path
    $location.path(path);
  }
};

Now, any switching class that you specify with the second parameter will be added to ES59en-ES60en and the go method will change the page path with the specified first parameter.

Switch the class

The next step is to create any number of switching classes and use the hooks provided by ngAnimate module, such as:

/* slideLeft */
.slideLeft {
  transition-timing-function: ease;
  transition-duration: 250ms;
}
 
.slideLeft.ng-enter {
  transition-property: none;
  transform: translate3d(100%,0,0);
}
 
.slideLeft.ng-enter.ng-enter-active {
  transition-property: all;
  transform: translate3d(0,0,0);
}
 
.slideLeft.ng-leave {
  transition-property: all;
  transform: translate3d(0,0,0);
}
 
.slideLeft.ng-leave.ng-leave-active {
  transition-property: all;
  transform: translate3d(-100%,0,0);
}