我正在尝试将高度动态变化的 div 移出其父 div 并返回。
问题是动态高度，否则我可以轻松地将负高度设置为底部值。
现在我只是将一个很大的负数像素设置为底部值，但这不是很好，也不能正确解决问题。 （从逻辑上讲，这种情况发生在少数人身上：fiddle）
希望下面的示例能够阐明我尝试做的事情。
我正在考虑使用转变相反，但我也没有找到解决方案。
当然我可以用 JavaScript 来做到这一点，但是和大家一样我更喜欢纯 CSS 解决方案 :)
#outer {
position: relative;
width: 400px;
height: 400px;
background: black;
overflow: hidden;
}
#inner {
position: absolute;
bottom: -500px;
/*
It's working but ugly and not perfect.
The value I need would be the height of the inner div, but it is dynamic
*/
width: 100%;
background: red;
transition: 0.4s;
}
#outer:hover #inner {
transition: 0.4s;
bottom: 0;
}
<div id="outer">
<div id="inner">
Some expanding text here
</div>
</div>
你可以使用CSStransform:translateY(100%)属性，因此高度是根据元素本身计算的。然后将值重置为0悬停时。
检查元素，您将能够准确地看到它的高度和位置。
还看一下支撑台 for transform，并在必要时添加前缀。
更新了 JsFiddle
.outer {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
background: grey;
overflow: hidden;
}
.inner {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: aqua;
transition: 0.4s;
transform: translateY(100%);
}
.outer:hover .inner {
bottom: 0;
transform: translateY(0);
}
<div class="outer">
<div class="inner">Some expanding text here..</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
