transition必须写在默认样式中，否则悬停或js修改时会“闪”；需显式声明初始值、避免transparent起始色和transition:all；仅数值型可插值属性（如opacity、transform）支持平滑过渡。
transition 必须写在默认样式里，否则就是“闪”
很多人给元素加了 transition 却发现悬停或 JS 修改后颜色/大小还是瞬间跳变——根本原因是把 transition 只写在 :hover 或 .active 类里。浏览器只会在「属性值从 A 变到 B」时触发过渡，而如果默认状态没声明 transition，它就按无动画方式渲染，A→B 就是硬切。
正确做法是把 transition 放在基础选择器中：
button {
background-color: #007bff;
transition: background-color 0.25s ease, transform 0.2s ease;
}
button:hover {
background-color: #0056b3;
transform: scale(1.05);
}
- 必须显式声明初始值（比如
background-color: #007bff），不能依赖继承或浏览器默认值 - 避免用
transparent作为起始色，Safari 和旧版 Chrome 对transparent → #fff插值不稳 - 别写
transition: all 0.3s，它会让padding、border-width这类影响布局的属性也参与过渡，引发重排卡顿
哪些 CSS 属性能平滑过渡，哪些不能
transition 只对「可插值」的数值型属性有效。不是所有属性都能动，乱加只会白忙活。
- ✅ 安全可用：
opacity、transform（translateX、scale、rotate）、color、background-color、box-shadow - ❌ 避免使用：
height、width（触发布局重排）、display（不可插值，直接切换）、content（纯文本内容无法过渡） - ⚠️ 表格特殊：直接给
tr或table加transition: background-color没反应——它们不是独立渲染盒；得写在td或th上，且要提前设好初始背景色
transition-duration 和 timing-function 怎么选才自然
0.3s 是多数交互的黄金时长：短于 0.2s 用户感知不到动画，长于 0.5s 易觉迟滞。timing-function 决定“怎么动”，不是越花哨越好。
- 按钮悬停、菜单展开推荐
cubic-bezier(0.4, 0.0, 0.2, 1)（即ease-in-out），起止缓、中间快，符合直觉 - 加载提示、状态切换用
ease-out（cubic-bezier(0.2, 0.0, 0.0, 1)），收尾柔和不突兀 - 绝对别用
linear做交互反馈——匀速运动缺乏真实感，用户会觉得“机械” - 移动端慎用 >0.4s 的 duration，300ms 内完成更贴合手指操作节奏
JS 触发过渡时，DOM 更新和 class 切换顺序很关键
用 JS 改变元素状态（比如更新表格数据、切换主题）时，如果先改 class 再改 DOM，或反过来，都可能让过渡失效。
- 正确顺序：先确保新 class 已挂载（
el.classList.add("updated")），再修改会触发动画的属性（如el.style.opacity = "0"） - 更新内容后想“淡入”，不能靠
transition直接作用于innerHTML——得用@keyframes+animation，例如：
td.updated {
animation: fadein 0.3s ease-out forwards;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
- 动画结束后记得用
animationend事件清理 class，否则重复点击会堆积动画 - 涉及滚动触发动画时，别在 scroll 回调里反复加 class——节流 +
getBoundingClientRect()判断可见性更稳妥
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
