主页 / coding / 问题 / 79136564
Accepted
girass
Asked: 2024-10-29 17:33:47 +0800 CST

为什么 css max-height 转换完成后内部 HTML 内容会立即出现？

  • 772

我尝试使用 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>

javascript

1 个回答

  1. Best Answer

    看来该问题是由overflow: auto中间包装器引起的：这是一个可滚动列表的版本，没有该包装器，并且使用无序列表ul而不是div。

    我没有使用max-height内联样式，而是在样式中默认--mh设置了自定义属性（）0，这样 Javascript 代码可以简化一些。

    let visible = false;

/* You should set the node just once, not at every 
 * call to the showHideList() function 
 */
const listContainerRef = document.getElementById('list-id');

function showHideList() { 
  if (listContainerRef) {
    visible = !visible;
    listContainerRef.style.setProperty("--mh", +visible);        
    /* see “unary plus operator” – this converts a boolean into 0 or 1 */
  }
}
    button {
  padding: 1rem; 
  background: #2aabd2;
  cursor: pointer;
}

#list-id {
  max-height: calc(200px * var(--mh, 0));
  transition: max-height 2s linear;
  overflow: auto;
  
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: block; 
    background-color: red; 
    padding: 0.5rem 0.75rem
  }
}
    <button onclick="showHideList()">Show / Hide</button>
<div id="list-id">
    <ul role="list">
      <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>
    </ul>
</div>

    • 3

相关问题