Question

我正在尝试进行从顶部的所有内容开始的转换，在页面加载后，内容会慢慢向下扩展页面。

我已经完成了大部分工作，除非内容从页面向下扩展，它一直在扩展到父母边界之外。我将所有元素设置为扩展到100％，所以我认为扩展元素只会扩展到其父项大小的100％，但它只是继续向下移动。

也许我只是误解了父母/孩子的身高百分比是如何运作的。谁能指出我做错了什么？感谢。

以下是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%;
}

Answer 1

百分比基于父母。你正在设置三个div，类.inner到高度100％。这意味着总高度为300％。将.inner设置为33％会更合理。

修改

只是出于兴趣，在SO上发现了另一篇文章可能会帮助你解决你想要做的事情，即过渡高度0到过渡高度auto，这实际上涉及将max-height设置为一个非常大的数字（至少比它的自动高度大），所以只转换到自动。 Link here

如果没有元素超出父母边界，你如何过渡高度？

1 个答案: