無法隱藏高度爲0，溢出：隱藏和行高的元素：0

我有一個div，我想摺疊到0的高度。我不能讓它爲display: none或visibility: hidden，因爲我想要在這個元素上動畫。無法隱藏高度爲0，溢出：隱藏和行高的元素：0

它父是：

position: absolute; 
display: flex; 
align-items: center; 
top: 28px; 
background: red; 
width: 100%; 
boxShadow: 0px 8px 6px -5px black; 
zIndex: 4;

當「隱藏」，該元素的樣式有：

height: 0px; 
line-height: 0px; 
overflow: hidden;

的內容被四溢的風格有這樣的造型：

position: absolute; 
height: 75px; 
top: 0; 
left: 0; 
right: 0; 
border-bottom: 1px solid #5A5A5A; 
line-height: 75px;

上述三個元素是divs。

因爲我在div上進行動畫製作，所以我不想在可能的情況下更改溢出內容的樣式。

如何通過摺疊高度正確隱藏元素？

來源

2017-02-03 AlanH

做請包括所有您的標記，所以我們有一個例子與http://stackoverflow.com/help/mcve –

一起工作，你嘗試添加！重要嗎？ – bxorcloud

我正在檢查舊的答案，並想知道，我能做些什麼來讓我的答案被接受？ ...順便說一句，我用動畫更新了它。 – LGSon

你可以這樣來做：

.testing { 
 
    height: 60px; 
 
    width: 200px; 
 
    background-color: #333333; 
 
    -webkit-transition:all 0.3s ease 0s; 
 
\t -moz-transition:all 0.3s ease 0s; 
 
\t transition: all 0.3s ease 0s; 
 
    } 
 

 
.testing:hover { 
 
    height: 0px; 
 
    } 
 

 
.testing-class { 
 
    font-size: 20px; 
 
    text-align: center; 
 
    color:#fff; 
 
    } 
 

 
.testing-class:hover { 
 
    display: none; 
 
    }

<div class="testing"> 
 
    <p class="testing-class">This is a test.</p> 
 
    </div>

最重要的一部分，儘管是過渡不存在。

來源

2017-02-03 18:49:40 scoopzilla

lil雖然跳動。 – scoopzilla

由於您使用position: absolute的.parent不會與它的含量增加，所以你需要給它的高度，這裏height: 75px

html, 
 
body { 
 
    margin: 0; 
 
} 
 
div.parent { 
 
    position: absolute; 
 
    display: flex; 
 
    align-items: center; 
 
    top: 28px; 
 
    height: 75px; 
 
    background: red; 
 
    width: 100%; 
 
    box-shadow: 0px 8px 6px -5px black; 
 
    z-index: 4; 
 
    overflow: hidden; 
 
} 
 
.content { 
 
    position: absolute; 
 
    height: 75px; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    border-bottom: 1px solid #5A5A5A; 
 
    line-height: 75px; 
 
    background: rgba(0,0,0,0.2); 
 
    transition: height 1s; 
 
    overflow: hidden; 
 
} 
 
div.parent:hover .content { 
 
    height: 0; 
 
}

<div class="parent"> 
 
    <div class="content"> 
 
    Hey, there, I'm a test text. Hover me and I disappear. 
 
    </div> 
 
</div>

來源

2017-02-03 19:20:49 LGSon

無法隱藏高度爲0，溢出：隱藏和行高的元素：0

回答

相關問題