动画高度和将 div 推到下面答案

【问题标题】：Animating Height and Pushing Divs Below动画高度和将 div 推到下面
【发布时间】：2016-12-02 07:16:14
【问题描述】：

这是我尝试做的：

当用户点击图片时（见下面的屏幕截图），我希望与该图片相关的一些文本显示在图片行（圆圈）下方。我一直在尝试为此使用过渡。我最初的测试是创建一个位置设置为相对的 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，但是它的不透明度设置为0。

【问题讨论】：

我已经重读了三次你的问题，但我仍然无法弄清楚你想做什么......：S据我所知，不需要任何绝对定位，但是我可能一定是弄错了。据我所知，没有单位的最高值 -100 甚至没有任何意义......
是的，可能解释得不是很好。我会尝试改写它。为什么使用绝对位置时 top 属性不可能为负值。它不是元素相对于其父元素的顶部位置吗？
因为它需要像px、em 甚至% 这样的单位。如果不是所有浏览器，它在大多数浏览器中都是ignored。
默认情况下，它需要 px，至少在好的浏览器中是这样；-)

标签： html css

【解决方案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/

【讨论】：

感谢您的出色回答。在所有方面都非常出色，因为它提供了代码和指向 Fiddle 的链接。现在我不会将其作为答案，因为您的解决方案非常接近我的需求，但处理的情况略有不同，在这种情况下，您需要扩展/收缩的块彼此跟随。我需要的是显示其中一个红色框，同时使其他框不可见。请参阅下面的解决方案。
eye roll “如果我两次大写都称它为 EXCELLENT，那么抄袭而不给他分数就可以了”这正是我想要的，@维斯瓦纳特。很好的答案。
哇。我记得这样做是为了面试任务。不使用任何插件。很高兴这有帮助。原始解决方案。我相信大多数插件可能都在做类似的事情。但是知道实际的解决方案很有趣......

【解决方案2】：

我意识到最初的问题并不容易理解。所以基本上，当有人点击图像时（我用鼠标悬停改变了它），下面会出现一些文本。因此，每个图像都有一个文本块（红色框）。现在，默认情况下，我希望隐藏所有框，但是当用户将鼠标移到一个图像上时，我希望与该图像关联的文本出现（使用动画）。当文本出现时，我希望将其下方的 div 向下推。

正如 Vishwanath 的出色回答中所建议的那样，文本块需要以某种方式包含在另一个块中。我稍微改变了我的要求，但这只是出于审美原因。当鼠标悬停在一个图像上时，它会触发一个 JS 来计算需要显示的文本块的高度（这个文本块是通过它的 id 检索的）。然后我们使用这个数字调整父 div 框的高度。父框的动画是使用 CSS3 过渡完成的。 onmouseleave 时，父框的高度重置为 0，文本移回屏幕上不可见的区域。

这是我的解决方案：

.bio_container
{
    display: inline-block;
    position: relative;
    border: 2 solid green;
    width: 100%;
    transition: height 1s ease-in-out;
    overflow: hidden;
}

.bio
{
    position: absolute;
    top: -200;
    transition: top 1s ease-in-out, opacity 0.5s ease-in-out;
    border: 1 none green;
    z-index: 0;
    opacity: 0;
    border: 1 solid red;
}

</style>
<script>
function setimage()
{
    var all = document.getElementsByClassName("portrait");
    for (var i = 0; i < all.length; ++i) {
        var ids = all[i].id;
        all[i].style.backgroundImage = "url('" + ids + "')";
    }
}
function appear(element)
{
    // compute height of this element
    var tmp = document.getElementById(element);
    var clientHeight = tmp.clientHeight;
    var container = document.getElementsByClassName('bio_container');
    container[0].style.height = clientHeight;
    tmp.style.top = 0;
    tmp.style.opacity = 1;
}
function disappear(element)
{
    // compute height of this element
    var tmp = document.getElementById(element);
    var clientHeight = tmp.clientHeight;
    var container = document.getElementsByClassName('bio_container');
    container[0].style.height = 0;
    tmp.style.top = -clientHeight;
    tmp.style.opacity = 0;
}
</script>
</head>
<body onload="setimage();">
<div id="wrapper1">
<div style="border: 1 none red; margin: 0;">
<!-- first state to put some text to explain who we are -->
<h2>XXX:</h2>
<div class="newspaper">
<p>In entirely be to at settling felicity. Fruit two match men you seven share.
Needed as or is enough points. Miles at smart no marry whole linen mr.
Income joy nor can wisdom summer. Extremely depending he gentleman improving
intention rapturous as.</p>
</div>
<!-- then add profile / readers can find more information -->
<h2>YYY:</h2>
<a href="#elle1" onmouseover="appear('elle1');" onmouseleave="disappear('elle1');"><div id="images/elle.png" class="portrait"></div></a>
<a href="#elle2" onmouseover="appear('elle2');" onmouseleave="disappear('elle2');"><div id="images/elle2.png" class="portrait"></div></a>
</div>
<div class="bio_container">
<div id="elle1" class="bio">
<p>On no twenty spring of in esteem spirit likely estate. Continue new you
declared differed learning bringing honoured. At mean mind so upon they rent
am walk. Shortly am waiting inhabit smiling he chiefly of in. Lain tore time
gone him his dear sure. Fat decisively estimating affronting assistance not.
Resolve pursuit regular so calling me. West he plan girl been my then up no.
On no twenty spring of in esteem spirit likely estate. Continue new you
declared differed learning bringing honoured. At mean mind so upon they rent
am walk. Shortly am waiting inhabit smiling he chiefly of in. Lain tore time
gone him his dear sure. Fat decisively estimating affronting assistance not.
Resolve pursuit regular so calling me. West he plan girl been my then up no.</p>
</div>
<div id="elle2" class="bio">
<p>asdasd asd asd asd asdas dasd asdasd asdasd asd sdas dasd asd asdasd asd
asd asd asd asd as das dasdasdalksjd lsajd iUoeuwr sdlkjf;sdfj a;sdkjf ad.</p>
</div>
</div>
<div>test</div>
</div>

【讨论】：