两个状态之间的角度 ui.router 倾斜过渡答案

【问题标题】：angular ui.router tilt transition between two states两个状态之间的角度 ui.router 倾斜过渡
【发布时间】：2013-09-21 02:50:58
【问题描述】：

我正在努力思考如何在下面的两个视图之间实现倾斜过渡。目前它只是替换了root中的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>

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

谢谢。

【问题讨论】：

标签： javascript css angularjs angular-ui-router

【解决方案1】：

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

对于您的登录状态，我猜您想使用 "header@app" 而不是 "@"（我知道，这很令人困惑，我正在尝试修复它）。

最后，如果您要为 header 视图的内容设置动画，您只需为元素添加一个 ng-animate 指令即可。

希望对您有所帮助。

【讨论】：