A way to achieve scalable page transitions using Angularjs

This article mainly introduces the use of ANGULARJS to achieve scalable page switching method, Angularjs is a popular JavaScript library, the need for friends can refer to the

ANGULARJS 1.2 Through the introduction of pure CSS class switching and animation, in a single page application to create a page to the page switch becomes easier. With just one ng-view, let's take a look at a scalable approach that introduces many different transitions, and how each page you specify is cut in and out.

Demo: Http://embed.plnkr.co/PqhvmW/preview

First, Mark:

<div class= "Page-container" > <div ng-view class= "Page-view" ng-class= "Pageanimationclass" > </div> </div>

since Ng-view uses the Enter/Leave animation, it is easy to use two Ng-view elements in the DOM to cut out the new view and the old view. Therefore, we use absolute positioning to establish the Ng-view in the Page-container element with relative positioning to support any kind of positioning switch.

' Go ' method

In a single page application, we still want to enable navigation through the URL and ensure that the browser's fallback and Next button as expected function. So once we set up our routing, template, controller (optional parsing) in $routeprovider, we can use a relative path in a ng-click to switch pages directly:

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

That also works, but we need to switch one class in Ng-view hard code. Instead, let's create a ' go ' method on the $rootScope that lets us specify a path and a switch like this:

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

This is our $rootScope ' go ' approach:

$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 switch class you specify for the second parameter will be added to the Ng-view and the Go method will change the page path with the first parameter specified.

Toggle Class

The next thing to do is to create an arbitrary number of switch classes and use the hooks provided by Nganimate module, for example:

style= "border:0;padding:0" > * * Slideleft/* Slideleft {transition-timing-function:ease; trans ition-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);}