我尝试使用 HTML 和 JavaScript 创建一个列表,当单击按钮时该列表会转换到视图中,其中包括一个可滚动的内部容器,并使用父 DIV 上的最大高度转换。
但是,虽然父 div 过渡平滑,但过渡完成后内容会立即出现。这似乎是在内部 div 溢出时发生的。
我知道删除内部 div、删除其溢出属性或将其高度限制为父级将阻止症状的发生,但我想保持内部 div 可滚动,但我不确定为什么我不能这样做。
这是我一直在尝试的一个例子。
let visible = false;
function showHideList() {
const listContainerRef = document.getElementById('list-id');
if (!listContainerRef?.style?.maxHeight)
return;
listContainerRef.style.maxHeight = visible ? 0 + 'px' : 200 + 'px';
visible = !visible;
}
<button onclick="showHideList()" style="padding: 1rem; background: #2aabd2">Show / Hide</button>
<div id="list-id" style="transition: max-height 2s linear; overflow: hidden; max-height: 0;">
<div style="overflow: auto; max-height: 200px">
<div style="background-color: green">
<span style="display: block; background-color: red; padding: 0.5rem 0.75rem">Item 1</span>
<span style="display: block; background-color: red; padding: 0.5rem 0.75rem">Item 2</span>
<span style="display: block; background-color: red; padding: 0.5rem 0.75rem">Item 3</span>
<span style="display: block; background-color: red; padding: 0.5rem 0.75rem">Item 4</span>
<span style="display: block; background-color: red; padding: 0.5rem 0.75rem">Item 5</span>
<span style="display: block; background-color: red; padding: 0.5rem 0.75rem">Item 6</span>
</div>
</div>
</div>
下面是另一个示例:
#list-container {
max-height: 0;
transition: max-height 2s ease-out;
overflow: hidden;
}
#list-container.visible {
max-height: 300px;
}
#list-content {
max-height: 200px;
overflow: auto;
}
li {
background-color: red;
padding: 0.5rem 0.75rem;
}
button {
padding: 1rem;
background: #2aabd2;
}
<button onclick="document.getElementById('list-container').classList.toggle('visible')">Show / Hide</button>
<div id="list-container">
<div id="list-content">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>