无法隐藏高度为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

回答

相关问题