Question

我在AngularJS中使用路由并希望页面之间有淡入/淡出过渡。我还想让每个页面在页面更改时滚动到顶部。我遵循这种技术来获得这个：http://jsfiddle.net/jfLcx/3/

<div class="container">
    <a href="#/link1">Link1</a>
    <a href="#/link2">Link2</a>
</div>

....

<div class="ng-view" autoscroll></div>

angular.module('main', ['ngRoute', 'ngAnimate'])
.config(function($routeProvider) {
    $routeProvider
        .when('/link1', {controller: '', templateUrl: 'link1.html'})
        .when('/link2', {controller: '', templateUrl: 'link2.html'})
        .otherwise({redirectTo: '/link1'});
});
.directive('myScroll', function($rootScope, $anchorScroll) {
    return function(scope, element) {
        $rootScope.$on('$routeChangeStart', function() {
           $anchorScroll(); 
        });
    };
});

这个小提琴是基于这个问题线程创建的： https://github.com/angular/angular.js/issues/6718

正如你可以在小提琴中看到的那样，但是在问题主题中也注意到了，但是未解决的问题，这个解决方案的问题在于链接页面Link1 - ＆gt;之间的导航问题。页面Link2，页面Link1首先在页面Link2转换发生之前滚动到顶部。这种行为我不知道要绕过。我希望Page Link1在不滚动到顶部的情况下淡出，但是页面Link2仍然在淡入淡出到顶部。

有没有人知道这个问题的解决方案？谢谢！ / O

****编辑******

下面的回复让我使用$ location事件，如果其他人从未遇到过这个问题，这就是我最终解决的问题：

我的视图容器上的推子类：

<div class="fader" ng-view></div>

在我的应用程序中，我检查locationChangeStart，然后在scolling to top之前隐藏视图：

app.run(function ($rootScope, $anchorScroll) {
  $rootScope.$on('$locationChangeStart', function (event) {
    jQuery('.fader').hide();
    $anchorScroll();
  });
});

在css中微妙淡出：

/* The starting CSS styles for the enter animation */
.fader.ng-enter {
  transition:0.1s linear all;
  opacity:0;
}

/* The finishing CSS styles for the enter animation */
.fader.ng-enter.ng-enter-active {
  opacity:1;
}

/* The starting CSS styles for the enter animation */
.fader.ng-leave {
    /*transition:0s linear all;*/
  opacity:1;
}

/* The finishing CSS styles for the enter animation */
.fader.ng-leave.ng-leave-active {
  opacity:0;
}

由于我是Angular的新手，这可能不是最好的方法，但它似乎有效。

Answer 1

您可以使用jquery animate滚动到页面转换的顶部。在angular app run config上为locationChangeSuccess添加监听器，然后使用jquery animate滚动到顶部

.run(function ($rootScope) {
                $rootScope.$on('$locationChangeSuccess', function (event) {
            jQuery("html, body").animate({ scrollTop: 0 }, "slow");
        });

    });

动画角度路径转换并自动滚动到顶部

1 个答案: