React表格行点击展开/收起过渡动画失效问题求助

问题根源 #

你当前的额外信息行使用了{expand && ...}的条件渲染逻辑：当expand为false时，整个<tr>元素会被直接从DOM中移除，而CSS过渡只对已存在于DOM中的元素的属性变化生效，这就是过渡动画没反应的核心原因。

修复方案 #

1. 调整组件渲染逻辑（UserList.tsx）

移除条件渲染，始终渲染额外信息行，通过expand状态控制类名来显示/隐藏：

// 替换原来的条件渲染代码
<tr className={`user_row ${expand ? "opened" : ""}`}>
  <td colSpan={6}>Id: {user._id}</td>
</tr>

2. 优化CSS过渡逻辑

注意：height: 0到height: auto无法触发CSS过渡（因为auto不是具体数值），改用max-height实现更灵活的过渡效果：

.user_row {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
  line-height: 0; /* 隐藏内容时去掉行高，避免留白 */
}
.user_row.opened {
  max-height: 200px; /* 设置一个足够覆盖内容的高度值，可根据实际调整 */
  line-height: normal; /* 展开时恢复正常行高 */
}

效果验证 #

修改后，点击展开按钮时：

• 图标旋转过渡保持正常
• 额外信息行通过max-height的平滑变化实现展开/收起动画

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