角度 UI.路由器在两种状态之间的倾斜过渡

angular ui.router tilt transition between two states

本文关键字：倾斜 之间 状态 UI 路由器 两种 角度      更新时间：2023-09-26

我正在尝试如何实现以下两个视图之间的倾斜过渡。 目前它只是替换了根目录中的 ui-view，地图不再存在。

如果我的配置是：

angular.module("myApp", ["ui.router"])
.config([
   "$stateProvider, $urlRouterProvider",
   function($stateProvider, $urlRouterProvider){
      $stateProvider
         .state("app", {
            url: '',
            abstract: true,
            template: '<div ui-view="header"></div><div>Content</div>'
         })
         .state("app.map", {
             url: '/',
             views: {
                "header": {
                   template: '<button ng-click="menu()">Menu</button>',
                   controller: function($scope, $state) {
                      $scope.menu = function(){
                          $state.transitionTo("app.login");
                      };
                   }
                }
             }
         })
         .state("app.login", {
            url: '/login',
            views: {
                "@": {
                   template: '<div>Login<button ng-click="close()">Close</button></div>',
                   controller: function($scope, $state){
                      $scope.close = function(){
                         $state.transitionTo("app.map");
                      };
                   }
                }
            }
         });
   }
])

/index.html （ 具有所有必要的脚本和 css ）

<html ng-app="myApp">
   <body>
      <div id="page">
         <div ui-view></div>
      </div>
   </body>
</html>

有谁知道我会怎么做？ 我迷路了

谢谢。

首先

，如果您要对视图进行绝对定位，则需要使用view@state语法（看起来您没有这样做header）。

对于您的登录状态，我猜您想执行"header@app"而不是"@"（我知道，这很混乱，我正在尝试修复它）。

最后，如果您尝试对header视图的内容进行动画处理，则只需对该元素执行ng-animate指令即可。

希望有帮助。

相关文章：