如何使用JavaScript为HTML表格的显现添加放缓或平滑动画效果

极简实现方案 #

display属性不支持CSS过渡效果，所以直接切换显示状态不会有动画，你只需要修改少量CSS和JS代码就能实现顺滑的淡入淡出效果，不需要引入额外依赖。

第一步：添加CSS样式 #

给目标表格加过渡规则：

#displaytable {
  /* 0.3s为过渡时长，可根据需求调整 */
  transition: all 0.3s ease;
  opacity: 1;
  visibility: visible;
  display: table;
}
#displaytable.hidden {
  opacity: 0;
  visibility: hidden;
  /* 可选：添加向上滑入/下滑出效果 */
  /* transform: translateY(-8px); */
  /* 可选：隐藏时不占用页面空间，max-height设置为大于表格最大高度的值即可 */
  /* max-height: 0;
  overflow: hidden; */
}

第二步：修改JS逻辑 #

把原来直接切换display的逻辑改成切换类名即可，代码更简洁：

function show_table() {
  document.getElementById("displaytable").classList.toggle("hidden");
}

如果你确实需要保留display属性的切换逻辑（比如必须让隐藏的表格完全不占DOM布局位置），可以用setTimeout配合过渡实现，代码如下：

function show_table() {
  const table = document.getElementById("displaytable");
  if (table.style.display === "none") {
    // 先设为可见但透明
    table.style.display = "table";
    table.style.opacity = 0;
    // 强制浏览器重绘后再触发过渡
    requestAnimationFrame(() => {
      table.style.opacity = 1;
    });
  } else {
    // 先触发淡出过渡，等过渡结束后再设为display:none
    table.style.opacity = 0;
    setTimeout(() => {
      table.style.display = "none";
    }, 300); // 时长和CSS的过渡时长保持一致
  }
}

对应的CSS只需要加一行过渡规则即可：

#displaytable {
  transition: opacity 0.3s ease;
}

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