Question

我已经看到了在为Angular 1.2点击/点击按钮时向前和向后设置动画视图的各种解决方法。这涉及在范围上设置一个方法，该方法将范围变量设置为在ng-class中使用的页面/动画，以在具有ng-view指令的元素上设置类。在更大的应用程序上，这似乎不太可扩展。部分原因我认为你会创建一个服务/工厂注入控制器而不重复代码。但我真的很想知道你是否可以在路由器解析功能中做些什么，你可以在那里为动画设置一些值，并将它们发送给一个返回一个立即解决的promise的服务。这可以在路由更改之前在ng-view元素上设置类，并可能以这种方式管理它。

是否有人有更明确的方法来处理正向和反向动画视图，具体取决于用户的路线？

Answer 1

这是我一直在玩的概念，并且能够在视图中为某些转发器元素工作。我还没有达到动画ng-view的目的......但是应该给你一个很好的起点。

概念是在每个路由配置中存储ng-animate对象。您可以将范围对象传递给ng-animate，而不需要表达式。

function Ctrl($scope){
   $scope.ANIM={enter: 'animate-enter', leave: 'animate-leave'};
}

<li ng-animate="ANIM">

在配置中：

 $routeProvider.when('/foo', {
                controller: 'Ctrl',
                templateUrl:'view1.html',
                anim:{enter: 'skew-enter', leave: 'skew-leave'}
            })

然后在run()中侦听$routeChangeStart并从当前路线配置中获取动画

app.run(function($rootScope){
            $rootScope.anim={enter: 'animate-enter', leave: 'animate-leave'}
            $rootScope.$on('$routeChangeStart', function(event, current){               
                $rootScope.anim=  current.anim 
            })
        })

在我的沙箱版本中，我做了：

 function Ctrl($scope, $rootScope){
       $scope.ANIM=$rootScope.anim;
    }

再次......这仍然是概念阶段的证明。当我有2个具有相同ng-animate的视图时，在每个控制器中使$scope.anim=$rootScope.anim有效。

希望这有帮助......如果你再做任何事情就会好奇

Answer 2

我发现工作的是使用css子类，因此在你的容器中你有一个绑定到一个名为“mode”的属性或类似的东西。

然后是一个在你想要切换动画的时候让它们改变的情况，无论是使用$ routeChangeSuccess还是其他东西都取决于你。

在路由配置中为AngularJS中的ng-view定义动画？

2 个答案: