Javascript AngularJS-使用TweenMax的位置感知ng视图导航

我是AngularJS的一个彻底的noob，我已经开始建立我的第一个项目，并且在这条路上的每一步都遇到了障碍

我正在尝试构建一些非常简单的东西，以下是我试图实现的要点：

• 我有5个页面/视图，它们是根据本文使用JSON数据拉入和创建的——blog.brunospelliti.com/how-to-defer-route-definition-in-an-angularjs-web-app。这是连接到工厂的。getJSON（）

• 在浏览视图时，我希望有一个层次旋转木马过渡效果。 i、 e.如果在索引0上单击索引1，将从右向左导航，然后在索引0上单击返回，将从左向右导航视图等。这在使用hasClass（）的my plunks中的animate.js文件中进行了条件化

我已经尝试了3种主要的选择，分别是：

选项1使用ng单击添加类-

• 这会产生最好的结果，并且完全按照我想要的方式导航，问题是当单击浏览器的后退或前进按钮时，类仍然与预期的相同

• 添加/更改enter和leave视图的类

选项2使用$routeProvider解析-

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

• 此方法可以将类添加/更改为“enter”动画，但“leave”仍保留旧类

选项3使用观察-

• 这个类似选项2只在第三次单击时才真正开始工作

• 此方法可以添加/更改“enter”动画的类，但“leave”仍保留旧类

我开始认为我的主要问题是理解（或缺乏）$scope和AngularJS编译一切的方式

我已经在这里呆了几个星期了，离我需要的地方已经不远了。任何帮助都将不胜感激

提前谢谢

更新：

• 下面是使用ui视图和ui视图附加的第四个示例

• 以下是plunk-embed.plnkr.co/vjSBLzMMKIrkHD7sOctN/preview

---

我的解决方案实际上相当简单。我没有更改每个方向的类，而是在$rootScope上附加了一个变量，该变量在任何页面转换之前都会更改，并基于$rootScope变量而不是类来创建动画。
任何人有什么建议吗？？？我将在这里暗中试探一下，我注意到，最后选择的方向是单击浏览器按钮时发生转换的方向。据猜测，这可能是缓存问题，或者在转换发生之前承诺尚未解决。在转换发生在承诺之外之前，您可以尝试更改所需转换的类。如果您尚未解决此问题，我明天将为您再做一次检查。这对于第一个示例（使用ng click将类附加到视图的示例）是正确的，这将产生与我要查找的最接近的最终结果（即将类附加到进入视图和离开视图）。与其他示例一样，将类附加到视图，但仅附加到目标视图，而不是前一个视图（即离开DOM的视图）。我第四次尝试使用ui路由器和ui路由器附加组件。但是我只能在进入的视图上影响类，而不能在离开的视图上影响类。这是一个屏幕截图的链接-，那么在转换之前我如何在进入和离开视图上更改类呢？嘿，lawless，我查看了你关于自由职业者的帖子。。在skype上ping我以进行进一步对话-skype:multipurposesynsoft

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;      

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

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

return function(scope, element, attrs) {

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