javascript - AngularJS - 使用 TweenMax 进行位置感知 ng-view 导航

Question

我对 AngularJS 完全是菜鸟，并且已经开始构建我的第一个项目，并且每一步都遇到了障碍......

我正在尝试构建一些非常简单的东西，这是我想要实现的目标的要点:

• 我有 5 个页面/ View ，这些页面/ View 是根据本文使用 JSON 数据拉入和创建的 - blog.brunscopelliti.com/how-to-defer-route-definition-in-an-angularjs-web-应用程序。它被连接到工厂。获取JSON()

  function($route, $location, $http, $q) {
  
  var jsonLoaded = {}; 
  
  jsonLoaded.getJSON = function() {
  
      var deferred = $q.defer();
      $http.get('pages.json').success(function(data) {
          deferred.resolve(data);
      }).error(function() {
          deferred.reject();
      });
      return deferred.promise;
  }
  return jsonLoaded;      
  

• 在 View 中导航时，我希望有分层轮播过渡效果。 即，如果您在索引 0 上，单击索引 1，将从右向左导航，然后单击索引 0 将从左向右导航 View ，等等。这是在我的 plunks 中的 animate.js 文件中进行条件化的，使用hasClass()。

我尝试了 3 个主要选项和单独的 plunks:

选项 1 使用 ng-click 添加类 - http://plnkr.co/edit/0mrebo8BMlrz1YkttxsT?p=preview

$scope.navDirection = function(pageClass) {
    $scope.pageTransClass = pageClass;
};

• 这会产生最佳结果，并且完全按照我想要的方式导航，问题是当单击浏览器后退或前进按钮时，类保持不变，这也是预期的。

• 添加/更改进入和离开 View 的类。

选项 2 使用 $routeProvider 解析 - http://plnkr.co/edit/SPfgKUyYt7LMQITHzj2I?p=preview

resolve: {
   direction: ["changePageDirection",
       function(changePageDirection) {
           return changePageDirection.direction($route.current.params.pageId, $routeParams.pageId);
       }
   ]
}

• 这会在添加类时产生延迟，即仅在第三次导航项点击时才真正开始工作。

• 此方法接缝将类添加/更改为“进入”动画，但“离开”仍然保留旧类。

选项 3 使用 Observe - http://plnkr.co/edit/TwtkGrY1Ww4uYY8n2LO5?p=preview

return function(scope, element, attrs) {

    attrs.$observe("pageDirectionObs", function (value) {
        if (value) {
            element.addClass(value);
        }
    });
};

• 这与选项 2 一样，仅在第三次点击时才真正开始起作用。

• 此方法接缝添加/更改“进入”动画的类，但“离开”仍然保留旧的类。

我开始认为我的主要问题要么是理解(或缺乏)$scope 以及 AngularJS 编译所有内容的方式。

我已经这样做了几个星期了，但距离我需要达到的目标还差得远。任何帮助将不胜感激。

提前致谢。

更新:

• 这是使用 ui-view 和 ui-view-extras 的第四个示例

• 这是 plunk - embed.plnkr.co/vjSBLzMMKIrkHD7sOctN/preview

Answer 1

我的解决方案实际上相当简单。我没有更改每个方向的类，而是将一个变量附加到 $rootScope，该变量在任何页面转换之前进行更改，并基于 $rootScope 变量而不是类来生成动画。