我正在尝试进行从顶部所有内容开始的过渡，在页面加载后，内容会慢慢向下扩展页面。
我已经完成了大部分工作，除了当内容向下扩展到页面时，它会一直扩展到父边界之外。我将所有元素都设置为扩展到 100%，所以我认为扩展元素只会扩展到其父元素大小的 100%，但它只是一直向下移动页面。
也许我只是误解了 parent / child 高度百分比的工作原理。谁能指出我做错了什么？谢谢。
Here is a link to the code on jsfiddle
这是 HTML 代码:
<body>
<div id="outer">
<div class="middle">
<div class="inner">
<h3>A-B</h3>
<ul>
<li>A</li>
<li>B</li>
</ul>
</div>
<div class="inner">
<h3>C-G</h3>
<ul>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
</div>
<div class="inner">
<h3>H</h3>
<ul>
<li>H</li>
</ul>
</div>
</div>
</div>
</body>
这是javascript代码:
window.onload = function () {
document.getElementById("outer").setAttribute("class", "loaded");
}
这是 CSS:
html {
height: 100%;
}
body {
height: 100%;
}
#outer {
height: 100%;
}
.middle {
border: solid 2px black;
height: 100%;
}
.inner {
height: 0%;
transition: height 5s 2s;
-moz-transition: height 5s 2s;
-webkit-transition: height 5s 2s;
-o-transition: height 5s 2s;
}
#outer.loaded .inner {
height: 100%;
}
最佳答案
百分比基于 parent 。您将三个类为 .inner 的 div 的高度设置为 100%。这意味着总高度为 300%。 .inner 设置为 33% 会更合理。
编辑
只是出于兴趣，在这里找到了另一篇关于 SO 的文章，它可能会帮助您完成您正在尝试做的事情，即过渡高度 0 到自动过渡高度，这实际上涉及将最大高度设置为一个非常大的数字(至少比它的自动高度大)，所以无论如何只能过渡到自动。 Link here
关于javascript - 如何在元素不超出父边界的情况下过渡高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22290391/