Question

这是我尝试做的事情：

当用户点击图片时（请参见下面的屏幕截图），我希望与此图片相关联的某些文字显示在图片行（圆圈）下方。我一直在尝试使用转换。我最初的测试是创建一个div（绿色），其位置设置为relative，以及一个子div（红色），其位置设置为绝对值。然后我动画了孩子div的顶级属性。这没用。

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

问题是我在这个文本下面有更多的div，并且我希望在文本向下滑动时推送它们（我的示例中的＆＃39; test＆＃39;文本）。但是这不起作用，因为当子div的位置设置为绝对时，父div的高度（绿色）不会展开。

我的问题是：有没有办法做到这一点？

感谢您的想法。

PS：在下面的屏幕截图中，绿色框的高度大于红色框的高度，因为在第一个框架下实际上有另一个红色div，但其不透明度设置为0。 / p>

screenshot

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/

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

动画高度和推动下面的Div

2 个答案: