表格淡入必须用opacity+transition配合visibility:hidden，禁用display切换；防闪屏需内联初始样式；逐行动画用css animation-delay或自定义属性；淡出后监听transitionend再隐藏元素。
表格加载时淡入，必须用 opacity + transition，不能靠 display 切换——浏览器根本不支持对 display 做过渡，写了也白动。
为什么直接写 display: none → display: table 没动画
因为 display 是 layout 属性，浏览器不把它纳入动画系统。你加 class、改 style，它只会“啪”一下跳出来，毫无渐变过程。淡入的本质是视觉层透明度变化，只能走 opacity 路线。
-
opacity必须在初始状态（非 hover / 非 .show）里就设为0，比如：table { opacity: 0; transition: opacity 0.35s ease; } - 必须搭配
visibility: hidden，否则opacity: 0的表格仍占位、可点击、能触发鼠标事件 - 触发类（如
.is-loaded）只负责设opacity: 1和visibility: visible，不要在里面重复写transition
怎么防“闪一下再淡入”这个最常见破绽
页面刚加载时 HTML 先渲染，CSS 后解析。如果没提前写内联样式，用户会看到表格先完整显示一帧，再突然变透明、再淡入——这就是“闪屏”。
- 给
<table> 加行内样式：<code>style="opacity: 0; visibility: hidden;" - 关键 CSS（包括
transition和@keyframes）尽量内联在的<style></style>里，别等外链 CSS 加载 - JS 触发时机用
DOMContentLoaded，不是window.onload；后者要等图片等资源，动画启动太晚 - 或用 CSS 自定义属性动态延时：
tr { animation-delay: calc(var(--i) * 0.1s); }，JS 只需给每个<tr> 设 <code>style="--i: 1"、--i: 2… - 动画中只动
opacity和transform（如translateY(-10px)），禁用height、margin等触发重排的属性 - 正确做法：监听
transitionend事件，等opacity动画结束再设display: none或visibility: hidden - 如果要收起高度，用
max-height+overflow: hidden，但得预设足够大的max-height值（比如max-height: 500px） - 性能敏感场景（如长表格、低端设备），务必加
will-change: opacity，并响应prefers-reduced-motion做降级
想让每行 <tr> 逐条滑入，别用 JS 同步加 class<p>用 JS 循环给所有 <code><tr> 立刻加同一个 class，它们会在同一帧开始动画，根本看不出 stagger 效果。<ul>
<li>改用 CSS <code>@keyframes + animation-delay，例如：tr { animation: fadeIn 0.4s forwards; }，再配合 tr:nth-child(1) { animation-delay: 0s; } tr:nth-child(2) { animation-delay: 0.1s; }
淡出后怎么安全释放空间、避免卡顿
很多人淡出时同时设 opacity: 0 和 display: none，结果动画中断——display 立刻生效，opacity 过渡被强制终止。
真正容易被忽略的是过渡时长和初始状态绑定方式：0.35s 是多数场景舒适值，但必须确保 opacity: 0 和 transition 在元素首次渲染前就已生效——这依赖内联样式或高优先级 CSS，而不是 JS 后续补刀。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
