如何在高度轉換期間阻止溢出自動顯示滾動條

這最初是爲了以不同的速度轉換兩個屬性，但被告知您不能轉換溢出。所以現在我只是問在高度過渡期間如何阻止溢出自動顯示滾動條。原文是在下面。如何在高度轉換期間阻止溢出自動顯示滾動條

我想要在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

如何在高度轉換期間阻止溢出自動顯示滾動條

回答

相關問題