Angularjs nAnimate转换将当前页面滚动到ui视图的顶部

当我点击一个视图下方的下一步按钮进入另一个状态时，我所处的当前页面会滚动回顶部，最后ngAnimate和css开始滑动这两个部分。但是，我不喜欢结果转换，因为它会导致某种闪烁效果

我想做的是，当我点击下一步按钮时，我想保持当前视图在屏幕上的位置，然后开始滑动

我的代码有什么需要更改的吗？我的ui视图上的autoscroll=“false”似乎没有帮助

这是我的新css

 #content-view.ng-enter, #content-view.ng-leave {
    position: absolute;
    // width: 100%;
    -webkit-transition:all 2s ease-in-out;
    transition:all 2s ease-in-out;
  }
  #content-view.ng-enter {
    // transform: translateX(100%);
    // -webkit-transform: translateX(100%);
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
  }
  #content-view.ng-enter-active {
    // transform: translateX(0);
    // -webkit-transform: translateX(0);
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
  #content-view.ng-leave {
    opacity: 1;
    // transform: translateX(0);
    // -webkit-transform: translateX(0);
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
  #content-view.ng-leave-active {
    opacity: 0;
    // transform: translateX(-100%);
    // -webkit-transform: translateX(100%);
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 50, 50); 
  }

这是一次抢劫，但我不知道为什么没有发生在这里。我的代码中可能有某种东西在做这种行为

不管怎样，我喜欢在视图之间切换时这一个的行为。但是，我希望在单击新的目标视图时，我们是否能够正确定位它。现在，如果我正在显示view1并向下滚动它，单击View2后，我希望view1的位置保持不变，但我希望View2的位置保持在正确的顶部位置，而不是与view1相同的位置

更新： 这是我如何让它工作的解决方案。我喜欢幻灯片过渡。看起来真的很专业

main.html中的代码段 不要忘记我在线程中提到的另一个魔法，它将存储当前的Y（顶部）坐标值

var offsets = document.getElementById('content-view').getBoundingClientRect();
document.getElementById('content-view').style.top = (offsets.top - 65) + 'px';

---

我取出了.style.position=“absolute”，因为我已经在css中对它进行了硬编码。享受吧

这可能就是你要找的

$scope.gotoTop = function() {
  $location.hash('top');
  $anchorScroll();
};

将此功能添加到导航栏的控制器，并将此功能添加到每个链接

示例

NavCtrl.js

angular.module('app').controller('NavCtrl', ['$scope', '$location', '$anchorScroll', function($scope, $location, $anchorScroll) {

    $scope.gotoTop = function() {
      $location.hash('top');
      $anchorScroll();
    };

}]);

---

请提供相关的html和js代码，或者plunker/fiddleI进行了更改并写了评论。谢谢，现在更容易理解IssueGraat！所以，是的，目标视图应该始终正确显示，对于当前视图，我们可以在将其滑出屏幕时保留其当前位置。谢谢。我没有答案，但在阅读你的问题时，我想到了UI路由器的问题。也许将其设置为false会有所帮助？我实际上有这个代码$window.scrollTo（0，0）；而且它工作得非常好。但是，我有$stateChangeStart。也许我应该让它成功，看看它是否会改变行为。但是，该scrollTo代码当前已禁用。我做了一些挖掘，发现了改变当前视图位置的代码。我不确定为什么会发生这种情况，因为在我的plunker示例中没有发生这种情况。如果我的视图实际上符合浏览器窗口的高度，我就不会有这个用户体验问题。不幸的是，我们的设计师使视图比浏览器的高度长，我理解她为什么这样做。这是可以接受的。它实际上正在工作，但闪烁或跳跃使我的应用程序看起来很简单。：）我想我的应用程序中的动画也有同样的问题，但我还是在学习AngularJS。。img上有14k行代码。。哈哈，这14k行代码来自angular代码，虽然我的代码也接近8k，不仅仅是angular代码，还有html、scss等等：）我想我已经非常接近于让它工作了。在将left和top css属性添加到其中一个类.ng leave之后，我看到了div的行为。我可以通过Angular动态更新左侧/顶部。我现在正在使用getBoundingClientRect（），它会将坐标返回给我。：）

$scope.gotoTop = function() {
  $location.hash('top');
  $anchorScroll();
};

angular.module('app').controller('NavCtrl', ['$scope', '$location', '$anchorScroll', function($scope, $location, $anchorScroll) {

    $scope.gotoTop = function() {
      $location.hash('top');
      $anchorScroll();
    };

}]);