A way to achieve scalable page transitions using Angularjs

Source: Internet
Author: User


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);}
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.