CSS 过渡不适用于 UL 列表中的最大高度切换

Question

我无法确定为什么在切换无序列表的最大高度时未应用指定的过渡。切换是通过切换 UL 上的类来完成的。我试过将过渡置于最大高度类，但无济于事。我创建了一个 working example on JSFiddle，下面提供了完整的代码。在此先感谢您的帮助。

<!DOCTYPE html>
<html lang=en>
<head>
    <title>Transition Problem</title>
<style>
.nav ul {
    overflow: hidden;
    transition: max-height 2s;
    -webkit-transition: max-height 2s;
    white-space: normal;
}

.max-height-150 {
    max-height: 150px;
}

.max-height-none {
    max-height: none;
}
</style>
</head>
<body>
<p>The JavaScript switches the class correctly, and the height of the UL switches as expected, but the transition is not applied.</p>
<button>SWITCH CLASS</button>
<nav class="nav">
    <ul class="max-height-150">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
        <li>Item 11</li>
        <li>Item 12</li>
        <li>Item 13</li>
        <li>Item 14</li>
        <li>Item 15</li>
        <li>Item 16</li>
        <li>Item 17</li>
        <li>Item 18</li>
        <li>Item 19</li>
    </ul>
</nav>
<script>
// Select the button:
var button = document.getElementsByTagName('button')[0];

// Toggle between the two max-height classes when the button is clicked:
var buttonClickListener = function (e) {
    var navUl = document.querySelectorAll('.nav ul')[0];
    if (navUl.classList.contains('max-height-150')) {
        navUl.classList.remove('max-height-150');
        navUl.classList.add('max-height-none');
    } else {
        navUl.classList.add('max-height-150');
        navUl.classList.remove('max-height-none');
    }
    e.preventDefault();
};

// Add a click listener on the button and register the toggle function on it:
if (button.addEventListener) {
    button.addEventListener('click', buttonClickListener, false);
} else if (button.attachListener) {
    button.attachEvent('click', buttonClickListener);
}
</script>
</body>
</html>

Answer 1

遗憾的是，您无法从设置的最大高度过渡到 none（或自动或 100%，等等）。您只能在设定的数字之间转换。尝试将新的最大高度设置为您认为它将具有的最大值，它应该会按照您想要的方式工作。

.max-height-none {
    max-height: 350px;
}

已更新 fiddle：https://jsfiddle.net/07cgn26r/1/

Answer 2

使用视口！

.max-height-none {
    max-height: 100vh;
}

CSS 过渡不适用于 UL 列表中的最大高度切换

CSS transition not applied to max-height switching on UL list

javascript

css

transition

html-lists

nav