Dodaj animację po lewej prawej stronie w angularJS z Routingiem?

Question

pracuję nad aplikacją 2 strona gdzie plik JSON jest w formacie:

{ 
    "data": ["basic": { 
       "username": "684685", 
       "name": "Roni Ch", 
       "gender": "Female", 
       "age": "13", 
       "class":"9C"}, 
       "username": "684684", 
       "name": "choup bjha", 
       "gender": "Female", 
       "age": "15", 
       "class":"10B"}, 
       "username": "684683", 
       "name": "JAYESH Ch", 
       "gender": "Female", 
       "age": "16", 
       "class":"12C"} 
]} 

app.js:

var app = angular.module ('App', [ 'ngRoute' , 'AppControllers', 'AppServices' ]);

App.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     when('/discover', { 
     templateUrl: 'partials/home-page.html', 
     controller: 'ProfileListCtrl' 
     }). 
     when('/discover/:username', { 
     templateUrl: 'partials/profile-detail.html', 
     controller: 'ProfileDetailCtrl' 

     }) 
     otherwise({ 
     redirectTo: '/discover' 
     }); 
    }]); 

więc na 2. pośrednictwem strony (/odkryć/loginu) mój kontroler

AppControllers.controller('ProfileDetailCtrl', ['$scope','$filter', '$routeParams', '$location' , '$rootScope','ProfileData', 
    function($scope, $filter, $routeParams, $location ,$rootScope, ProfileData) { 
     ProfileData.list(function(response) { 
      var username= $routeParams.username; 

      var profile= response.data; 


      $scope.resultData= $filter('filter') (profile, {basic: 
                 {"username": username} 
                 })[0]; 
      console.log($scope.resultData); 

     var currentIndex=profile.indexOf($scope.resultData); 

      $scope.next= function(){ 

       currentIndex++; 
       console.log(currentIndex); 
       $scope.nextprofile= profile[currentIndex].basic.username; 
       console.log($scope.nextprofile); 
       var path= "/discover/"+ $scope.nextprofile; 
       console.log(path); 
       $location.path(path); 
       } 
}); 


    }]); 

i 2 strona (Profiledetail.html) wynosi:

<button class="btn btn-default " ng-click=" next()">next</button> 



<div class="profile_details" >resultData</div> 

PROBLEM: Chcę animować tę stronę (druga strona) w taki sposób, aby po kliknięciu na ne Przycisk xt przesunie się w prawo i podobnie poprzedni przycisk slajd-w lewo, ale nie otrzymuję żadnych wskazówek, aby to zrobić.

Jeśli ktoś może mi pomóc tutaj to będzie wielki ..

góry dzięki.

Answer 1

to pewnie go o użyciu ui-router do obsługi stanów i angular-ui-router-anim-in-out obsłużyć animacje stateChange (choć może po prostu użyć onstatechange)