如何用CSS实现<tbody>展开/收起的动画效果？求指导

以下几种方案都不会破坏表格的HTML结构，能实现流畅的过渡效果：

方案1：max-height + opacity 过渡（推荐） #

利用CSS过渡控制<tbody>的max-height和opacity属性，模拟滑动+淡入的效果，直接给<tbody>加样式即可：

#tbody {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

#tbody.show {
  max-height: 1000px; /* 设置一个大于tbody实际高度的值即可 */
  opacity: 1;
}

JS部分只需要切换show类：

const toggleBtn = document.getElementById('toggleBtn');
const tbody = document.getElementById('tbody');

toggleBtn.addEventListener('click', () => {
  tbody.classList.toggle('show');
});

方案2：CSS 关键帧动画 #

如果需要更自定义的动画路径（比如从上方滑入），可以用@keyframes实现：

#tbody {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
}

#tbody.show {
  max-height: 1000px;
  animation: slideIn 0.3s forwards;
}

#tbody.hide {
  animation: slideOut 0.3s forwards;
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideOut {
  to {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
  }
}

JS部分需要处理动画结束后的类清理（避免重复触发动画异常）：

const toggleBtn = document.getElementById('toggleBtn');
const tbody = document.getElementById('tbody');

toggleBtn.addEventListener('click', () => {
  if (tbody.classList.contains('show')) {
    tbody.classList.remove('show');
    tbody.classList.add('hide');
    tbody.addEventListener('animationend', () => {
      tbody.classList.remove('hide');
    }, { once: true });
  } else {
    tbody.classList.add('show');
  }
});

方案3：逐行过渡动画 #

想要更细腻的逐行显示/隐藏效果，可以给<tr>添加过渡，配合<tbody>的overflow:hidden：

#tbody {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

#tbody.show {
  max-height: 1000px;
}

#tbody tr {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#tbody.show tr {
  opacity: 1;
  transform: translateY(0);
}

/* 可选：给每行添加延迟，实现依次出现的效果 */
#tbody.show tr:nth-child(1) { transition-delay: 0.05s; }
#tbody.show tr:nth-child(2) { transition-delay: 0.1s; }
#tbody.show tr:nth-child(3) { transition-delay: 0.15s; }

JS部分和方案1一致，仅需切换show类。

注意事项 #

• max-height的值需要设置为大于<tbody>实际可能的高度，避免内容被截断；如果内容高度不确定，可以用JS动态计算后设置。
• 所有方案都不需要修改表格的HTML结构，完全符合HTML标准，不会影响表头列对齐。

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