如何用纯CSS实现Angular项目的平滑展开/收起面板

你当前的面板展开收起功能正常，但过渡效果未生效，核心问题是CSS无法对height: 0到height: 100%的变化计算过渡值——因为100%是相对父元素的不确定高度。用max-height替代height就能纯CSS实现平滑动画，具体修改如下：

修正后的CSS代码 #

.content {
  transition: max-height 0.5s ease;
  max-height: 0;
  overflow: hidden;
}

.content.is-expanded {
  /* 设置一个比内容实际高度大的数值，确保能完全展开 */
  max-height: 1000px;
}

关键说明 #

1. 替换height为max-height：浏览器可以计算0到具体数值（比如1000px）的过渡动画，即使内容实际高度小于这个值，动画也会在内容完全展开后自然停止。
2. 修正原CSS笔误：你原来的.content.is-expanded里写了transition: height 0.5ss;，多了一个s，已修正。
3. Angular代码无需修改：保持原有的点击事件和类绑定逻辑即可。

这样修改后，面板的展开/收起就会有平滑的过渡动画，完全用纯CSS实现，不需要依赖jQuery。

内容的提问来源于stack exchange，提问作者Sergey