我有一个div,我想要折叠到0的高度。我不能让它成为display: none
或visibility: hidden
,因为我想要对这个元素进行动画处理。
它的父母是:
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;
上面的三个元素是div。
因为我在div上制作动画,所以如果可能的话,我不想更改溢出内容的样式。
如何通过折叠高度来正确隐藏元素?
由于你使用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>
你可以这样做:
.testing {
height: 60px;
width: 200px;
background-color: #333333;
-webkit-transition:all 0.3s ease 0s;
-moz-transition:all 0.3s ease 0s;
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>
但最重要的部分是过渡不存在。