Question

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

@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>

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

1 个答案:

工作示例