使用Routing在angularJS中添加左侧动画？

Question

我正在开发一个2页的应用程序,其中json文件的格式为:

{
    "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'
      });
  }]);

所以第二页意味着(/ discover /:username)我的控制器

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


  }]);

和第二页(Profiledetail.html)是:

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



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

问题: 我想以这样的方式为这个页面(第2页)设置动画,点击下一个按钮将向右滑动,同样地,前一个按钮向左滑动, 但我没有得到任何指导.

如果有人能在这里帮助我那么它会很棒..

提前致谢.

Answer 1

我可能会使用ui-router来处理状态，并使用angular-ui-router-anim-in-out来处理状态更改动画（尽管你可以只使用onstatechange）