平滑过渡需在基础样式中声明transition，仅作用于可动画属性（如opacity、transform），避免display等无效属性；优先使用transform+opacity组合以确保gpu加速和流畅性。
平滑过渡效果不是靠“加个动画”就行，关键在于选对属性、写对位置、避开浏览器不支持的坑。
transition 必须写在默认状态，不能只放 :hover 里
鼠标一移上去动画正常，一移开就“啪”地跳回原样——这几乎一定是 transition 只写在 :hover 选择器里了。浏览器只在进入悬停时应用该规则，离开后规则失效，自然没退出动画。
正确做法是把 transition 声明放在元素的基础样式中（比如 .btn 或 button），确保它同时控制“进”和“出”两个方向：
.btn {
background-color: #4A90E2;
transition: background-color 0.3s ease-in-out;
}
.btn:hover {
background-color: #1E5799;
}
- 即使只改一个属性（比如
transform），基础态也要显式写上初始值，例如transform: scale(1)，否则浏览器可能从none开始计算，导致行为不一致 - 不要依赖“默认值会自动参与过渡”，CSS 不这么工作
只对可动画化属性用 transition，别碰 display、font-size
transition 不是万能的。只有「可动画化」的 CSS 属性才真正支持过渡，其他属性写了也白写，且不会报错，你根本察觉不到失败。
推荐优先使用的属性（性能好、兼容稳）：
-
opacity、transform（触发 GPU 加速，首选） -
background-color、color、border-color -
max-height（用于展开/收起，但必须设具体数值，不能用auto）
明确无效或高风险的属性：
-
display：离散值，无法插值；想隐藏请用opacity: 0+visibility: hidden -
font-size、margin、padding：可能触发布局重排（layout），卡顿明显，尽量用transform替代位移 -
height/width：能动，但同样触发重排，慎用
用 transform + opacity 组合比纯 background-color 更稳
纯背景色过渡在深色模式切换、高对比场景下容易显得生硬，低端设备上也可能轻微卡顿。
更可靠的做法是组合使用 transform 和 opacity，它们天然走合成层（compositor），动画顺滑且不阻塞主线程：
.btn {
opacity: 1;
transform: scale(1);
transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn:hover {
opacity: 0.9;
transform: scale(1.03) translateY(-2px);
}
- 避免写
transition: all 0.3s——它会让所有可动画属性都响应变化，比如box-shadow每次重绘都算一次变化，导致意外抖动 - 缓动函数别全用
ease，cubic-bezier(0.25, 0.8, 0.25, 1)这类自定义曲线对交互反馈更自然
动态内容（如进度条、下拉菜单）要绕开 height: auto 和 display
想让一个面板展开时有高度过渡，但设了 height: auto 后 transition 完全失效——因为 auto 不是可计算数值，浏览器无法生成中间帧。
可行方案是用 max-height 模拟：
- 收起状态：
max-height: 0+overflow: hidden - 展开状态：
max-height: 500px（需预估足够大，否则内容被裁） - 更健壮的做法是 JS 测量真实
scrollHeight后设置max-height，动画结束再清除内联样式
下拉菜单、汉堡菜单同理：永远别用 display: none 控制显隐，改用 transform: translateY(-100%) 或 scale(0) 移出可视区，配合 opacity 实现视觉过渡。
最常被忽略的一点：过渡动画是否真在合成层运行，取决于你选的属性和浏览器是否启用硬件加速——transform 和 opacity 是目前唯一能稳定触发它的组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
