javascript - AngularJS基于滚动的路由

Question

我正在一个项目中使用 Angular，并且想知道是否可以使用 Angular 的路由功能(或 ui-router 等第三方库的路由功能)来控制上述场景中的导航。

如果是这样，除此之外是否可以有替代路线(例如，模式打开，将其自身呈现为页面)？

Answer 1

您可以将子部分拆分为具有不同状态的不同模板，然后使用 ui-router 的 animation API在状态之间进行转换。这是一个实现示例。

在您的路线配置中

app = angular.module('myApp', ['ui.router', 'ngAnimate']);

app.config(['$stateProvider', function($stateProvider) {
  $stateProvider  

  .state('firstSubpage', {
    url: '/',
    template: '<div class="full-page">\
       <h2>Page One</h2>\
       <a ui-sref="secondSubpage">Next page</a>\
    </div>'
  })
  .state('secondSubpage', {
    url: '/page2',
    template: '<div class="full-page two">\
       <h2>Page Two</h2>\
       <a ui-sref="firstSubpage">Next page</a>\
    </div>'
  })

}]);

在 CSS 中

/* set height explicitly on ui-view */
div[ui-view] {
  position: absolute;
  height: 100%;
  width: 100%;
}

[ui-view].ng-enter, [ui-view].ng-leave {
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}

[ui-view].ng-enter {
  -webkit-transform:translate3d(0, 100%, 0);
  -moz-transform:translate3d(0, 100%, 0);
  transform:translate3d(0, 100%, 0);
}

[ui-view].ng-enter-active {
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:translate3d(0, 0, 0);
  transform:translate3d(0, 0, 0);
}

[ui-view].ng-leave {
  /*padding-left: 0px;*/  
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:translate3d(0, 0, 0);
  transform:translate3d(0, 0, 0);
}

[ui-view].ng-leave-active {
  /*padding-left: 100px;*/
  -webkit-transform:translate3d(0, -100%, 0);
  -moz-transform:translate3d(0, -100%, 0);
  transform:translate3d(0, -100%, 0);
}

然后您只需要在主模板中添加一个带有 ui-view 的元素即可。

Here's a working example on plunker .