防止页面在ng-view转换中“跳转”到顶部

时间:2014-03-06 14:22:56

标签: angularjs css3 cordova

我正在尝试在Cordova / AngularJS手机应用程序中实现原生视图转换。

我有我想要的滑动效果,有一个缺陷:当从高视图转换到较短视图时,当视口滚动到较短视图的底部之外时,视图的滚动位置被设置为“to”开始时顶部滚动屏幕。然后视图“正确地”跳跃到位。

I've made an example - noticeable when transitioning from Page 2 to Page 3

我正在使用以下CSS来转换我的观点:

.view-animate-container {
  position:relative;
  height:100%;
  width: 100%;
}

.view-animate.ng-enter, .view-animate.ng-leave {
  -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;

  display:block;
  width:100%;

  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.rtl .view-animate.ng-enter {
  -webkit-transform: translate3d(100%, 0, 0);
}
.rtl .view-animate.ng-enter.ng-enter-active {
  -webkit-transform: translate3d(0, 0, 0);
}
.rtl .view-animate.ng-leave.ng-leave-active {
  -webkit-transform: translate3d(-100%, 0, 0);
}

.ltr .view-animate.ng-enter {
  -webkit-transform: translate3d(-100%, 0, 0);
}
.ltr .view-animate.ng-enter.ng-enter-active {
  -webkit-transform: translate3d(0, 0, 0);
}
.ltr .view-animate.ng-leave.ng-leave-active {
  -webkit-transform: translate3d(100%, 0, 0);
}

在我的视角转换动画开始之前,我怎样才能防止从视图转换到顶部?

I've made an example - noticeable when transitioning from Page 2 to Page 3

1 个答案:

答案 0 :(得分:1)

你的ng-view div上的

设置为autoscroll =“false”