Comment implémenter le changement de page évolutif à l'aide d'AngularJS_AngularJS

AngularJS 1.2 facilite la création de transitions de page à page dans une application monopage en introduisant des transitions et des animations purement basées sur des classes CSS. En utilisant simplement une vue ng, examinons une approche évolutive qui introduit de nombreuses transitions différentes et comment chaque page peut être transitionnée vers l'intérieur et vers l'extérieur.

Démo : http://embed.plnkr.co/PqhvmW/preview

Tout d'abord, identifiez :

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

Étant donné que ng-view utilise l'animation entrée/sortie, vous pouvez simplement utiliser deux éléments ng-view dans le DOM pour activer la nouvelle vue et désactiver l'ancienne vue. Par conséquent, nous utilisons le positionnement absolu pour établir ng-view dans l'élément conteneur de page qui utilise le positionnement relatif, prenant ainsi en charge tout type de changement de positionnement.

méthode 'go'

Dans une application monopage, nous souhaitons toujours activer la navigation via les URL et garantir que les boutons Précédent et Suivant du navigateur fonctionnent comme prévu. Ainsi, une fois que nous avons configuré nos routes, modèles et contrôleurs (analyse facultative) dans $routeProvider, nous pouvons utiliser un chemin relatif en un simple clic pour changer de page directement :

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

Cela fonctionne également, mais nous devons coder en dur un commutateur de classe dans ng-view. Au lieu de cela, créons une méthode 'go' sur $rootScope qui nous permet de spécifier un chemin et une bascule comme ceci :

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

Voici notre méthode 'go' $rootScope :

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

Maintenant, toute classe à bascule que vous avez spécifiée comme deuxième paramètre sera ajoutée à ng-view et la méthode go modifiera le chemin de la page avec le premier paramètre spécifié.

Changer de classe

La prochaine chose à faire est de créer n'importe quel nombre de classes bascule et d'utiliser les hooks fournis par le module ngAnimate , par exemple :

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