So implementieren Sie einen skalierbaren Seitenwechsel mit AngularJS_AngularJS

AngularJS 1.2 erleichtert das Erstellen von Seite-zu-Seite-Übergängen in einer Einzelseitenanwendung durch die Einführung reiner CSS-klassenbasierter Übergänge und Animationen. Lassen Sie uns anhand einer NG-Ansicht einen Blick auf einen skalierbaren Ansatz werfen, der zahlreiche verschiedene Übergänge einführt und wie jede Seite ein- und ausgeblendet werden kann.

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

Zuerst taggen:

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

Da ng-view eine Enter/Leave-Animation verwendet, können Sie einfach zwei ng-view-Elemente im DOM verwenden, um in die neue Ansicht zu wechseln und die alte Ansicht zu wechseln. Daher verwenden wir die absolute Positionierung, um ng-view im Seitencontainerelement einzurichten, das die relative Positionierung verwendet, wodurch jede Art von Positionierungsumschaltung unterstützt wird.

'go'-Methode

In einer Single-Page-Anwendung möchten wir weiterhin die Navigation über URLs ermöglichen und sicherstellen, dass die Zurück- und Weiter-Schaltflächen des Browsers wie erwartet funktionieren. Sobald wir also unsere Routen, Vorlagen und Controller (optionales Parsen) in $routeProvider eingerichtet haben, können wir einen relativen Pfad in einem NG-Klick verwenden, um die Seiten direkt zu wechseln:

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

Das funktioniert auch, aber wir müssen einen Klassenwechsel in ng-view fest codieren. Erstellen wir stattdessen eine „go“-Methode für $rootScope, mit der wir einen Pfad und einen Umschalter wie folgt angeben können:

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

Dies ist unsere $rootScope 'go'-Methode:

$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);
  }
};

Jetzt wird jede Toggle-Klasse, die Sie als zweiten Parameter angegeben haben, zu ng-view hinzugefügt und die go-Methode ändert den Seitenpfad mit dem angegebenen ersten Parameter.

Klasse wechseln

Als nächstes müssen Sie eine beliebige Anzahl von Toggle-Klassen erstellen und die vom ngAnimate-Modul bereitgestellten Hooks verwenden, zum Beispiel:

/* 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);
}