javascript - CSS 关键帧——从动态高度开始

Question

我有一堆列表项。当我点击它时，我希望每个都垂直展开，就像 Accordion 一样。为了做到这一点，我使用了关键帧，如下所示:

@keyframe expand {
      0% { height: 100px; }
    100% { height: 200px; }
}

唯一的问题是，这些列表项的高度是动态的，因为它们包含其他元素。有没有办法为关键帧设置动态起始高度？它的工作方式是，如果开始时它大于 100px，它会先缩小然后再增大。

Answer 1

给列表项一个 max-height 然后使用 transition单击时达到 min-height。在列表项上使用 overflow: hidden 来包含将列表项推过 100px 的元素。

工作示例

在此示例中，所有列表项都会在单击时展开。显然，您可以更改 javascript 以仅扩展被单击的列表项。

var expand = document.getElementById("items");

expand.addEventListener('click', function() {
  this.classList.toggle('click');
}, false);

* {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul {
  background: #FF0;
  padding: 1px 0;
}
li {
  background: #F00;
  margin: 10px;
  transition: all 1s;
  max-height: 100px;
  overflow: hidden;
}
.click li {
  min-height: 200px;
}

<ul id="items">
  <li>Item</li>
  <li>Larger
    <br />Item</li>
  <li>Largest
    <br />Item
    <br />In
    <br />this
    <br />List</li>
</ul>