Scrollbar появляется через CSS анимацию/переход

Question

Я оживляющий мою нг ракурс в Угловом с кубических Безье переходом: с

/* 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 в body css. Но учтите, что добавление этого будет скрывать все переполненное содержимое, включая вертикальную полосу прокрутки, и вы не хотите этого делать, поскольку содержимое страницы будет скрыто, если высота переполнена. Так что, если вы используете слайд-переход (вбок) и вы хотите, чтобы скрыть горизонтальную полосу прокрутки, которая появляется во время перехода, то используйте вместо этого:

body { 
    overflow-x:hidden; 
} 

Таким образом, вы только скрывает горизонтальную полосу прокрутки и вертикальная полоса прокрутки будет работать.