Html 滚动条通过 CSS 动画/过渡出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20973870/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scrollbar appears through CSS animation/transition
提问by Bastian Gruber
I am animating my ng-view in Angular with a cubic-beziertransition:
我正在使用三次贝塞尔转换在 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;
}
Everything works fine, except of the scrollbar which appears when the content is entering.It moves from the right to the left side (as you can see in the code).
一切正常，除了在输入内容时出现的滚动条。它从右侧移动到左侧（如您在代码中所见）。
I want to hide the scrollbar during the animation.
我想在动画过程中隐藏滚动条。
What am i doing wrong?
我究竟做错了什么？
回答by Neel
You need to set overflow:hiddenin the bodycss. But note that, adding this will hide all overflown contents including the vertical scroll bar and you dont want to do that since the page contents will be hidden if the height is overflown. So if you are using a slide transition (sidewards) and you only want to hide the horizontal scroll bar that appears during transition, then use this instead:
你需要overflow:hidden在bodycss中设置。但请注意，添加此项将隐藏所有溢出的内容，包括垂直滚动条，您不想这样做，因为如果高度溢出，页面内容将被隐藏。因此，如果您正在使用幻灯片过渡（侧向）并且只想隐藏在过渡期间出现的水平滚动条，请改用：
body {
overflow-x:hidden;
}
This way, you are only hiding the horizontal scroll bar and the vertical scroll bar will still work.
这样，您只是隐藏了水平滚动条，而垂直滚动条仍然有效。
回答by revliscano
I faced the same problem. This is how I solved it (I'm using my own code as an example)
我遇到了同样的问题。这就是我解决它的方法（我以我自己的代码为例）
HTML
HTML
<div class="team-box-2-info">
<h4>John Doe</h4>
<h6>Programmer</h6>
<p class="team-box-2-desc">Lorem ipsum dolor sit amet consectetum...</p>
</div>
CSS
CSS
.team-box-2-desc {
max-height: 0;
overflow-y: hidden;
transition: max-height 0.5s ease-out;
}
.team-box-2:hover .team-box-2-desc{
max-height: 350px;
transition: max-height 1s ease-in;
}
JS
JS
$('.team-box-2').hover(function(){
var element = $(this);
setTimeout(function(){
element.find('p.team-box-2-desc').css('overflow-y', 'auto');
}, 1000);
}, function(){
$(this).find('p.team-box-2-desc').css('overflow-y', 'hidden');
});
