我正在用 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;
}
一切正常,除了输入内容时出现的滚动条之外。它从右侧移动到左侧(如代码中所示)。
我想在动画期间隐藏滚动条。
我究竟做错了什么?
你需要设置overflow:hidden
in the body
CSS。但请注意,添加此内容将隐藏所有溢出的内容,包括垂直滚动条,并且您不想这样做,因为如果高度溢出,页面内容将被隐藏。因此,如果您使用幻灯片过渡(向侧面)并且只想隐藏过渡期间出现的水平滚动条,请改用以下命令:
body {
overflow-x:hidden;
}
这样,您仅隐藏水平滚动条,垂直滚动条仍然有效。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)