Question

我在Angular中使用 cubic-bezier 过渡动画我的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 css中设置body。但请注意，添加此内容将隐藏所有溢出的内容，包括垂直滚动条，您不想这样做，因为如果高度溢出，页面内容将被隐藏。因此，如果您正在使用幻灯片转换（侧向）并且您只想隐藏转换期间出现的水平滚动条，请改为使用它：

 body {
    overflow-x:hidden;  
}

这样，您只隐藏水平滚动条，垂直滚动条仍然有效。

Answer 2

我遇到了同样的问题。这就是我解决的方式（我以自己的代码为例）

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

.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

$('.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');
});

Answer 3

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

Answer 4

两种解决闪烁问题的方法（滚动条快速出现/消失时发生的向左/向右移动）

始终显示滚动条。

body {
  overflow-y: scroll;
}

此黑客（info）

html { 
  margin-left: calc(100vw - 100%); 
}

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

4 个答案: