表格淡入必须用opacity+transition，禁用display过渡；需设opacity:0/1、visibility:hidden/visible及transition声明；内联初始样式防闪烁；逐行淡入用@keyframes+animation-delay；仅动画opacity和transform以保性能；淡出后应监听事件设display:none释放空间。
表格淡入必须用 opacity + transition，不能只靠 display
直接写 display: none → display: table 不会触发任何动画，浏览器根本不支持对 display 做过渡。淡入效果本质是让透明度从 0 变到 1，所以必须走 opacity 路线。
常见错误是给 <table> 设 opacity: 0 却忘了加 transition 声明，结果 class 一加就“啪”一下全显，毫无过渡。正确做法是：
-
table默认样式里必须包含opacity: 0和transition: opacity 0.3s ease;（注意：必须写全属性名，禁用all） - 配合
visibility: hidden防止透明表格仍占位、可点击 - 触发类（如
.is-visible）只负责设opacity: 1和visibility: visible
表格元素初始状态要内联或确保 CSS 加载优先
页面刚加载时，HTML 先渲染，CSS 后解析。如果 <table style="opacity: 0"> 没写内联样式，而外部 CSS 还没加载完，用户会看到表格“闪一下再淡入”——这是最常被忽略的视觉破绽。
解决办法很实在：
立即学习“前端免费学习笔记（深入）”；
- 给
<table>加行内样式：style="opacity: 0; visibility: hidden;" - 关键 CSS（包括
@keyframes或transition声明）尽量内联在<head>的<style>里，别等外链 CSS - JS 触发时机用
DOMContentLoaded，不是window.onload，避免等图片拖慢动画启动
表格行（<tr>）逐行淡入要用 animation-delay
整张表一起淡入单调；想让 <tr> 一行接一行浮现，就得放弃 transition，改用 @keyframes + animation-delay。
核心点在于：
- 每个
<tr>都要单独设animation: fadeIn 0.35s forwards;，且animation-fill-mode: backwards确保动画前保持opacity: 0 - 延时靠
animation-delay: calc(var(--i) * 0.1s)或预设tr:nth-child(1) { animation-delay: 0s; }等方式实现 - 别用 JS 循环同步加 class——所有
<tr>会在同一帧开始动画，失去 stagger 效果
性能敏感场景必须避开 layout 属性动画
表格本身重排代价高，如果在淡入时还动 width、height、margin 这类触发 layout 的属性，滚动或动画会卡顿，尤其在低端设备上。
安全做法只有两个：
- 动画只用
opacity和transform（比如transform: translateY(-10px)），它们走合成层，不触发重排 - 真要位移+淡入，必须用
@keyframes把opacity和transform写在同一段from/to里，否则不同步 - 加
will-change: opacity或transform: translateZ(0)强制 GPU 加速，Chrome 对纯opacity有时会跳过合成
真正容易被忽略的是：淡出后要不要释放空间。如果后续不再显示，别只靠 opacity: 0，得监听 transitionend 或 animationend 事件，再手动设 display: none ——否则 DOM 里还挂着不可见但占内存的表格。
