Question

我试图将动态变化的高度的div移出它的父div并重新进入。

问题是动态高度，否则我可以轻松地将负高度设置为底部值。现在我只是设置一个较大的负像素数作为最低值，但它不是很好，并没有正确解决问题。（逻辑上这适用于小数字：fiddle）希望以下示例说明我尝试做的事情。

我正在考虑使用转换，但我也没有找到解决方案。

当然我可以用JavaScript做到这一点，但是每个人我更喜欢纯CSS解决方案：）

＆＃13;

#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;
}

＆＃13;

<div id="outer">
    <div id="inner">
        Some expanding text here
    </div>
</div>

＆＃13;

Answer 1

如果我了解您的问题，您可以为其正常和max-height状态设置:hover并转换它。但是，您必须将其设置为max-height，您知道它总是足够高（这可能会导致随机速度，具体取决于内容的大小）。

类似于：JS Fiddle

.outer {
    position: relative;
    display: inline-block;
    width: 400px;
    height: 400px;
    background: black;
    overflow: hidden;
}
.inner {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background: red;
    transition: 0.4s;
    max-height: 0;
    overflow: hidden;

}
.outer:hover .inner {
    transition: 0.4s;
    bottom: 0;
    max-height: 40px;
}

否则，我会推荐一个JS解决方案。

Answer 2

您可以使用CSS transform:translateY(100%)属性，因此高度是根据元素本身计算的。然后在悬停时将值重置为0。

检查元素，您将能够准确地看到它的高度和位置。

另请查看transform support tables，并在必要时添加前缀。

<强> Updated JsFiddle

＆＃13;

.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);
}

＆＃13;

<div class="outer">
    <div class="inner">Some expanding text here..</div>
</div>

＆＃13;

将具有动态高度的div移出其父容器

2 个答案: