angularjs - 多方向angularjs View 动画

Question

目标:根据导航顺序向左或向右滑动的 angularjs View 之间的多向水平滑动动画。

问题:我找不到让 View 知道我正朝着实际可行的特定方向前进的好方法。

到目前为止我得到了什么: 参见 this codepen . 如果我们要根据导航中对象的顺序向后导航，我会将 back 类应用于正文。我使用此类告诉 View 在必要时进行反向动画。

$scope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
    $scope.back = toParams.id < fromParams.id ? true : false;
});

为什么我认为它不起作用:“back”类没有应用于新插入的“ui-view”元素，因此它不服从 css。 p>

有人有什么想法吗？随意 fork 到 codepen...

Answer 1

这可能是一种解决方法，而不是执行此操作的正确方法。 我所做的是重新申请类(class)。我注意到动画仅在切换 back 类时发生。所以在状态改变开始时，我交换了 back 类并重新应用它。

    $scope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
       $scope.back = $scope.back ? false : true;
       $timeout( function(){        
           $scope.back = toParams.id < fromParams.id ? true : false;
       }, 1);       
});

这是 pen .