css实现折叠展开动画

css实现折叠展开动画

在 CSS 中实现折叠展开动画需要使用一些布局和过渡属性。

<div class="accordion">
  <div class="accordion-title">Hover me!</div>
  <div class="accordion-body">
    <div>
      <p>Lorem ipsum ...</p>
    </div>
  </div>
</div>

如果将鼠标悬停在元素上，出现一个下拉菜单。但是如果我们想让它看起来有一个很好的平滑过渡怎么办？

.accordion-body {
  height: 0;
  transition: 500ms height ease;
}


.accordion:hover .accordion-body {
  height: auto;
}

不幸的是，这不起作用：从height: 0过度到height: auto没有动画效果。

如何解决这个问题？

那么，第一个解决方案可能是将height属性设置为固定数字，而不是auto。

但这不是一个很好的方法：为了计算这个固定数字，我们必须求助于JavaScript，以便计算我们的.accordion-body实际高度。

但是我们希望只使用CSS来实现这个效果，既然height不行，我们为什么不直接使用max-height呢？

.accordion-body {
  max-height: 0;
  transition: 500ms max-height ease;
}


.accordion:hover .accordion-body {
  max-height: 200px;
}

由于我们设置了一个固定值max-height，浏览器现在能够正常执行过度动画了。

唯一的问题是，由于我们设置了一个固定值max-height，但是内容可能会溢出。

如果您确定您的内容永远不会达到特定高度，那么使用此方法就完全没问题！只需为元素指定一个适当的值max-height就可以了。

但请注意，max-height的值越高，过渡就越奇怪（可以尝试将max-height: 1000px看看情况如何变化！）。

我们还有其他更好方案吗？可以避免任何固定值height/max-height吗？

我们实际上可以使用一个巧妙的技巧，使用CSS网格布局。

.accordion-body {
  display: grid; 
  grid-template-rows: 0fr;
  transition: 250ms grid-template-rows ease;
}


.accordion:hover .accordion-body {
  grid-template-rows: 1fr;
}


.accordion-body > div {
  overflow: hidden;
}

我们真正要做的就是grid-template-rows将其从0fr过渡到1fr：这样，我们的网格项将从 0 过渡到其“自然”高度。就这么简单。