滚动条通过CSS动画/过渡出现

Question

我在Angular中使用立方贝塞尔过渡动画我的ng-view :

/* Animations */
.slide-animation.ng-enter, .slide-animation.ng-leave  {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;

  position:absolute;
}

.slide-animation.ng-enter {
  opacity:0;
  left:300px;
  overflow-y: hidden;
  overflow-x:hidden;
}

.slide-animation.ng-enter.ng-enter-active {
  opacity:1;
  left: 0;
  top: 0;
}

.slide-animation.ng-leave {
  opacity:0;
  left: 0;
  top: 0;
}

.slide-animation.ng-leave.ng-leave-active {
  opacity:0;
  left: 0;
  top: 0;
}

一切正常,除了内容进入时出现的滚动条.它从右侧移动到左侧(如代码所示).

我想在动画期间隐藏滚动条.

我究竟做错了什么？

Answer 1

你需要overflow:hidden在bodycss中设置.但请注意,添加此内容将隐藏所有溢出的内容,包括垂直滚动条,您不想这样做,因为如果高度溢出,页面内容将被隐藏.因此,如果您正在使用幻灯片转换(侧向)并且您只想隐藏转换期间出现的水平滚动条,请使用此代码:

 body {
    overflow-x:hidden;  
}

这样,您只隐藏水平滚动条,垂直滚动条仍然可以工作.