如何在高度转换期间阻止溢出自动显示滚动条

这最初是为了以不同的速度转换两个属性，但被告知您不能转换溢出。所以现在我只是问在高度过渡期间如何阻止溢出自动显示滚动条。原文是在下面。如何在高度转换期间阻止溢出自动显示滚动条

我想要在0.3s上过渡内容框的高度和宽度，但想要溢出-y在1s或延迟时间相同。我主要试图做到这一点，以便在转换发生时滚动条不会从那里闪烁。

.barOpen { 
    -webkit-transition: height 0.3s ease-out 
    height: 225px 
    width: 98.5% 
    margin: 0.25% 
    padding: 0.5% 
    background-color: #28251f 
    color: white 
    opacity: 1 
    overflow-x: hidden 
    overflow-y: auto 
    float: left 
} 
.barClose { 
    -webkit-transition: height 0.3s ease-out 
    width: 100% 
    background-color: #d79e12 
    height: 0 
    overflow-x: hidden 
    overflow-y: hidden 
    float: left 
}

来源

2014-01-27 aintnorest

'overflow'不能设置动画，所以这个问题不计算。 – Jon

[如何在一个元素上有多个CSS转换？]（http://stackoverflow.com/questions/7048313/how-to-have-multiple-css-transitions-on-an-element） –

Thanks Danko在格式上进行编辑。我注意到我没有做，并去编辑它，并没有做得更快，然后丹科。 Jon说，我需要找到另一种方式。 Zach我使用Sass，最初的形式只是.class返回两个空格没有分号。它适用于sass没有问题。 – aintnorest

溢出不是可以动画的，但是你可以使用容器溢出：隐藏并将转换应用到那个容器。

.barContainer { 
    -webkit-transition: height 0.3s ease-out; 
    width: 100%; 
    overflow: hidden; 
    float: left; 
} 

.barContainerOpen { 
    background-color: #28251f; 
    height: 225px; 
} 

.barContainerClose { 
    background-color: #d79e12; 
    height: 225px; 
} 

.bar { 
    height: 225px; 
    width: 98.5%; 
    margin: 0.25%; 
    padding: 0.5%; 
    background-color: #28251f; 
    color: white; 
    opacity: 1; 
    overflow-x: hidden; 
    overflow-y: auto; 
}

Simplified Jsfiddle

来源

2016-10-28 07:04:00

如何在高度转换期间阻止溢出自动显示滚动条

回答

相关问题