使用CSS transition结合onClick事件实现元素显示动画遇阻求助

嘿，我来帮你排查下这个transition: height 1s不生效的问题！根据你的描述和代码片段，大概率是这几个常见原因导致的，咱们一个个来看：

1. 元素初始状态没有明确的height值 #

CSS的transition需要元素有可计算的起始和结束值才能触发动画。如果你的#new元素初始height是默认的auto，哪怕你给.open类设置了具体height，浏览器也没法计算auto到固定值的过渡，自然就没有动画效果。

解决办法是给初始状态明确设置height为0，同时加上overflow: hidden（避免内容在收起时暴露出来）：

#new {
  height: 0;
  overflow: hidden;
  transition: height 1s ease; /* 把transition放在初始样式上，不是展开后的类 */
  /* 其他基础样式，比如边框、背景色等 */
}

#new.open {
  height: 200px; /* 设置你需要的展开高度 */
}

2. 不要用display属性控制显示隐藏 #

如果你的#new初始是display: none，然后在添加.open类时改成display: block，这会直接打断transition动画——因为display的变化是瞬间的，浏览器不会等待过渡完成。

必须用height+overflow的方式来控制收起/展开，就像上面的示例那样。

3. 进阶：内容高度不确定的情况 #

如果#new里的内容高度不固定，没法设置固定的height值，可以用max-height来模拟过渡：

#new {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease;
}

#new.open {
  max-height: 500px; /* 设置一个比内容最大高度大的值 */
}

这样元素会从max-height:0过渡到max-height:500px，视觉上和height过渡差不多，适合动态内容的场景。

最后检查点 #

• 确认没有其他CSS规则（比如带!important的样式）覆盖了height或transition属性；
• 检查#new元素的父元素有没有设置overflow: hidden，导致过渡被截断。

按照上面的方法调整后，你的height过渡动画应该就能正常工作啦！

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