React项目中CSS height属性hover过渡效果不生效问题

问题核心原因 #

CSS过渡动画要求起止状态的属性值必须是可计算插值的明确数值，你当前代码里hover状态设置的height: max-content属于浏览器根据内容动态计算的关键字值，和初始态的固定值height: 150px之间无法生成过渡中间帧，动画会直接失效。
除此之外现有代码还有两个影响动画效果的问题：

• transition属性仅写在:hover伪类下，只有鼠标移入时会加载过渡规则，鼠标移出时规则失效，会直接跳回初始状态，没有收回动画
• 你同时写了transform: translateY(-10px)的上移效果和border-color变色效果，但没有把这两个属性加入过渡列表，这两个变化会瞬间触发，没有平滑效果

推荐修复方案（纯CSS，无额外JS依赖） #

用max-height替代height做过渡是这类自适应高度动画成本最低的实现方案：初始状态给和默认高度一致的固定max-height值，hover状态给一个略大于卡片实际展开最大高度的固定max-height值，两个状态都是明确数值，过渡就可以正常运行。
修复后的完整CSS代码如下：

.icon-box {
  padding: 30px;
  background: #fff;
  box-shadow: 0px 5px 90px 0px #f0f0ff;
  border-radius: 18px;
  border-bottom: 5px solid #fff;
  height: 150px;
  max-height: 150px; /* 初始最大高度和默认高度保持一致，为固定数值 */
  font-size: small;
  overflow-y: hidden;
  cursor: pointer;
  /* 过渡规则写在元素默认状态，移入移出都生效，覆盖所有需要动画的属性 */
  transition: max-height 0.4s ease, transform 0.3s ease, border-color 0.3s ease;
}
.icon-box:hover {    
  transform: translateY(-10px);
  border-color: #000080;
  height: auto; /* 内容自适应 */
  max-height: 500px; /* 该值根据你卡片最长描述的实际高度调整，比最大展开高度高50px以内即可，不要设置过大 */
}

注意事项 #

hover态的max-height不要盲目设超大值：如果实际展开后内容高度只有200px，你把max-height设成2000px，浏览器会按照150px到2000px的区间计算过渡时长，大部分时间你看不到高度变化，会出现动画反应慢、收尾突兀的问题，根据实际业务内容调整到合适值即可。
如果你的卡片内容长度差异极大，没法统一设置固定max-height，可以用JS监听mouseenter/mouseleave事件，动态获取DOM的scrollHeight值设置为行内height样式触发过渡，过渡结束后再把height改回auto即可，实现逻辑不复杂，适合对动画精度要求高的场景。

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