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

Define animation for ng-view in AngularJS in routing configuration?

本文关键字：中的 ng-view 动画 AngularJS 定义 路由 配置      更新时间：2023-09-26

我已经看到了在点击/单击Angular 1.2按钮时向前和向后对ng-view进行动画处理的各种解决方法。这涉及在您的作用域上有一个方法，该方法将范围变量设置为在 ng-class 中使用的页面/动画中，以在具有 ng-view 指令的元素上设置一个类。在较大的应用程序上，这似乎不是很可扩展。我相信其中一部分是您将创建一个服务/工厂以注入控制器中，以免复制代码。但我真的想知道是否可以在路由器解析功能中执行一些操作，在那里为动画设置一些值并将它们发送到返回立即解析的承诺的服务。这可以在路由更改之前在 ng-view 元素上设置类，并可能以这种方式管理它。

有没有人有更明确的方式来处理正向和反向的 ng-view 动画，具体取决于用户要去的路线？

这是我一直在玩的一个概念，并且能够在一些中继器元素的视图中工作。我还没有达到动画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它可以工作时。

希望这有帮助...好奇你是否用它做了更多的事情

我发现有效的是利用 css 子类，以便在您的容器中绑定到名为"mode"的属性或类似的东西。

然后，每当

您想要切换动画时，都可以更改这些动画，无论是使用$routeChangeSuccess还是其他内容取决于您。

相关文章：