对 table 直接加 transition 无效，因其不响应 display、visibility 或初始渲染状态变化；transition 需依赖 opacity、transform 等可插值属性的显式变更，而表格首次渲染无此过程。
不能直接用 transition 对整个 <table> 元素做「入场动画」或「渐显」——它不响应 <code>display、visibility 或初始渲染状态变化，transition 必须依赖属性值的「可插值变更」，而表格加载时这些属性没发生有效过渡。
为什么对 table 直接加 transition 大概率无效
transition 只在元素已有样式、且某个支持插值的 CSS 属性（如 opacity、transform）被 JavaScript 或伪类修改时才触发。表格初次渲染时：
-
display: table从无到有不是插值过程，无法过渡 -
opacity: 0 → 1本身可过渡，但若没提前设好初始opacity: 0和触发时机（比如靠 JS 添加 class），页面一加载就已渲染完成，过渡根本来不及启动 -
height、width设为auto时不可过渡；设固定值又违背表格自适应布局本意
真正能用 transition 的表格交互场景
聚焦在用户可主动触发的状态切换，比如悬停、点击、展开行等，这时属性变化明确、可控：
- 给
<tr> 加 <code>:hover并过渡background-color和transform - 用 JS 切换某行的
is-expandedclass，控制其max-height+opacity实现展开收起 - 对
<td> 内图标或 badge 做点击反馈：<code>scale或opacity变化 - 避免对
border、padding过渡——重排开销大，视觉突兀
示例（悬停高亮+轻微上浮）：
.data-table tr {
transition: background-color 0.2s ease, transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}
.data-table tr:hover {
background-color: #f5f9ff;
transform: translateY(-2px);
}
想实现「表格加载时淡入滑入」该怎么做
必须放弃纯 transition 思路，改用 @keyframes + animation，并确保动画在 DOM 渲染后立即触发：
- 给
<table> 添加初始 class，如 <code>is-loading，CSS 中定义animation: slideIn 0.4s ease-out forwards -
@keyframes slideIn里只用opacity和transform（不碰 layout 属性） - 动画结束后保留最终状态：
animation-fill-mode: forwards - 如果表格由 JS 动态插入（如 Ajax 加载完再 append），务必在插入 DOM 后再加动画 class，否则动画可能不触发
关键点：动画不是“加给表格”，而是“加给已存在且可见的表格元素”，时机比写法更重要。
表格动画最容易被忽略的是性能和语义冲突：用 transform 替代 top/left，用 will-change: transform 提前告知浏览器（仅对频繁动画的行），以及始终检查 prefers-reduced-motion 媒体查询——这些不是锦上添花，而是让动画真正可用的前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
