下面的动画高度和推动Divs [英] Animating Height and Pushing Divs Below

问题描述

这是我尝试做的：

当用户点击图片（见下面的屏幕截图）时，我想要一些与此图片相关联的文字显示在图像行（圆圈）下方。我一直在试图使用过渡。我的初始测试是创建一个div（绿色）的位置设置为relative，和一个子div（红色），其位置设置为绝对。然后我动画的子div的顶部属性。这很好。

When the user clicks on an image (see screenshot below), I'd like some text associated with this image to show up under the row of images (circles). I have been trying to use a transition for this. My initial test was to create a div (in green) with the position set to relative, and a child div (in red) whose position was set to absolute. I then animated the top property of the child div. This worked okay.

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

问题是我在这个文本下有更多的div，我想他们当文本向下滑动（在我的例子中的'测试'文本）时推送。但是这不起作用，因为你知道，父div的高度（绿色）在子div的位置设置为绝对时不会展开。

The problem is that i have more divs under this text, and I'd like them to be pushed when the text is sliding down (the 'test' text in my example). However this doesn't work, because the parent div's height (in green), as you know, is not expanded when the children div's position is set to absolute.

我的问题是：是否有办法这样做？

My question thus is: is there a way of doing this at all?

感谢您的想法。

：在下面的屏幕截图中，绿色框的高度大于红色框的高度，因为在第一个框之下实际上有另一个红色div，但它的不透明度设置为0.

PS: in the screenshot below, the height of the green box is larger than the height of the red box, because there's actually another red div under the first one, but its opacity is set to 0.

推荐答案

我意识到原来的问题不容易理解。所以基本上，当有人点击图像（我改变了，用鼠标悬停）一些文本显示在下面。因此，您有一个文本块（红框）与每个图像相关联。现在，默认情况下，我想要隐藏所有的框，但是当用户将他/她的鼠标移动到一个图像上时，我想要显示与此图像相关联的文本（使用动画）。

I realise the original question wasn't easy to understand. So basically, when someone clicks on the image (I changed that with a mouseover) some text shows up underneath. Thus you have one block of text (red box) associated with each image. Now, by default I want all the boxes to be hidden, but when the user moves his/her mouse over one image, I want the text associated with this image to appear (using an animation). And when the text shows up, I want the divs which are below it, to be pushed down.

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

As suggested in the EXCELLENT answer from Vishwanath, the text blocks need somehow to be contained within a another block. I have changed my requirements a bit, but that was only for aesthetical reasons. When the mouse is over one image, it triggers a JS which computes the heigh of the text block that needs to be displayed (this text block is retrieved through its id). Then we adjust the height of the parent div box using this number. Animation of parent's box is done using CSS3 transition. On onmouseleave, the height of the parent's box is reset to 0, and the text is moved back to an area on the screen, where it's not visible.

这是我的解决方案：

.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>

这篇关于下面的动画高度和推动Divs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！