javascript - 使用路由在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"}
]}

应用程序.js:

var App = angular.module('App', [ 'ngRoute', '应用程序 Controller ', '应用服务']);

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)我的 Controller

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)