html - 动画高度和将 Div 推到下方

Question

这是我尝试做的:

当用户点击一张图片(见下面的屏幕截图)时，我希望与该图片相关的一些文本显示在图片行(圆圈)下方。我一直在尝试为此使用过渡。我最初的测试是创建一个位置设置为相对的 div(绿色)和一个位置设置为绝对的子 div(红色)。然后我对子 div 的 top 属性进行动画处理。这工作正常。

.parent { position: relative; }
.child { position: absolute; top: -100; transition: top 1s linear; }
.child:target { top: 0; }

问题是我在这个文本下有更多的 div，我希望在文本向下滑动时推送它们(我的示例中的“测试”文本)。但这不起作用，因为如您所知，当子 div 的位置设置为绝对时，父 div 的高度(绿色)不会扩展。

因此我的问题是:有没有办法做到这一点？

感谢您的想法。

PS:在下面的截图中，绿色框的高度大于红色框的高度，因为第一个div下面其实还有一个红色div，只是它的不透明度设置为0。

Answer 1

有多种方法可以做到这一点。

我使用 CSS3 完成此操作的一种方法是使用高度而不是使用绝对定位。由于高度流动通常没有任何定位问题。但是高度的问题是你需要为 CSS 过渡提供固定的高度。所以解决方法是在 div 周围有一个额外的包装器来扩展和使用它的高度，并将它提供给扩展 div，如下所示。 忽略行和列类。

HTML

<div class="small-12 columns  level-1">
    <div class="row category-name ">
        <div class="small-12 columns">
            <span class="">Click to expand or collapse</span>
        </div>
    </div>

    <div class="level-2 level-2-container" style="height: 60px;">
        <div class="grow-wrapper small-12 columns">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
</div>

CSS

.level-2-container {
    -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
    -o-transition: height 0.5s;
    -webkit-transition: height 0.5s;
    transition: height 0.5s;
    overflow: hidden;
    /* outline: 1px solid red; */
    padding: 0;
    overflow:hidden;
}

JavaScript

$(document).on('click', '.level-1', function(event) {
    var $level1 = $(event.currentTarget);
    var $level2 = $level1.find('.level-2-container');
    var $growWrapper = $level1.find('.grow-wrapper');
    var heightToSet = $growWrapper.height();

    growDiv = $level2[0];
    if (growDiv.clientHeight) {
        $level2.height(growDiv.clientHeight);
        $level2.height(0);
    } else {
        growDiv.style.height = heightToSet + "px";
    }

    event.stopPropagation();
});

JS-Fiddle http://jsfiddle.net/hps8p/