是否可以揭示沒有隱藏溢出的元素？

是否可以在容器上創建this kind接口，但沒有overflow:hidden（.bar）。是否可以揭示沒有隱藏溢出的元素？

我不能使用overflow:hidden，因爲在.row-1和.row-2我有一些明顯大於.row的下拉元素。所以如果我使用overflow:hidden那些下拉菜單將被切斷。

但是，如果我刪除overflow:hidden那麼.row-2將首先顯示哪個是錯誤的。

我可以有我下面的.bar另一個元素與一些特定background-color和z-index比.row較高，但低於我提到的那些下拉菜單，但它不是真正的解決方案，它實際上是不可能的，因爲下面.bar我有一些其他的元素。

無論如何，解決方案不必使用這些translateY方法。它可能是別的，但希望沒有JS。

.bar { 
 
    background: #7187A2; 
 
    color: #35495F; 
 
    height: 80px; 
 
    width: 100%; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    overflow: hidden; 
 
} 
 
.row { 
 
    height: 80px; 
 
    line-height: 80px; 
 
    padding: 0 20px; 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out; 
 
} 
 
#switch:checked ~ .bar .row-1, 
 
#switch:checked ~ .bar .row-2 { 
 
    -webkit-transform: translateY(-80px); 
 
    -moz-transform: translateY(-80px); 
 
} 
 
body { 
 
    padding-top: 150px; 
 
}

<input type="checkbox" id="switch"> 
 
<label for="switch">Click here</label> 
 

 
<div class="bar"> 
 
    <div class="row row-1">This is row number 1</div> 
 
    <div class="row row-2">And that's 2nd row</div> 
 
</div>

來源

2015-05-18 Paweł

你可以給你的問題添加一些代碼。沒有代碼就無法理解這個問題。如果你能做一個相同的小提琴，那麼解決你的問題會更有幫助。 –

@NileshMahajan你可能錯過了[鏈接到小提琴]（http://jsfiddle.net/vvwc27u7/）。 – janfoeh

因此'.bar'的高度需要改變，這取決於可見行需要多少空間？ – janfoeh

您可以更改幻燈片的效果，而是使用規模效應。它是不一樣的，但它是非常接近：

.row-1 { 
    -webkit-transform-origin: top center; 
    transform-origin: top center; 
} 
.row-2 { 
    margin-top: -80px; 
    -webkit-transform: scaleY(0); 
    transform: scaleY(0); 
    -webkit-transform-origin: bottom center; 
    transform-origin: bottom center; 
} 

#switch:checked ~ .bar .row-1 
{ 
    -webkit-transform: scaleY(0); 
    transform: scaleY(0); 
} 

#switch:checked ~ .bar .row-2 
{ 
    -webkit-transform: scaleY(1); 
    transform: scaleY(1); 
}

fiddle

第一行頂邊之上倒塌。（請參閱變換原點）

第二行最初在底部邊距處摺疊，然後從此處擴展到全高度。

來源

2015-05-18 17:07:27 vals

我喜歡它！如果我無法解決這個問題，我可能會用你的解決方案，雖然它不是完美的，但工程很好:)謝謝！ –

它很高興，它幫助。希望有人會找到更好的解決方案！ – vals

是否可以揭示沒有隱藏溢出的元素？

回答

相關問題