Question

目标： angularjs视图之间的多向水平幻灯片动画，根据导航顺序向左或向右滑动。

问题：我找不到一个好方法让视图知道我正在朝着实际工作的具体方向发展。

到目前为止我得到了什么： 见hiding。如果我们根据导航中对象的顺序向后导航，我会将$scope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) { $scope.back = toParams.id < fromParams.id ? true : false; });类应用于正文。我使用这个类来告诉视图在必要时反向动画。

Month,   Gender, State, Value
2010-01, M,      S1,    10
2010-02, M,      S1,    20
2010-05, M,      S1,    26
2010-03, F,      S2,    11

为什么我认为它不起作用：'back'类没有应用于新插入的'ui-view'元素，所以它不服从css。

有人有任何想法吗？随意分叉到codepen ...

Answer 1

这可能是一种解决方法，而不是正确的方法。我做的是重新申请课程。我注意到动画只发生在切换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。

多向angularjs视图动画

1 个答案: