opacity过渡卡顿的根源在于transition未写在真正改变opacity的元素上，须满足三点：声明在常态规则中、作用于自身、初末值明确；推荐用ease-in-out或自定义cubic-bezier提升流畅感；高频显隐应配合visibility与transform优化性能；JS控制时需强制重排并避免滥用transition-delay。
opacity 变化卡顿？过渡属性必须加在触发元素本身
直接写 transition: opacity 0.3s 却没效果，大概率是因为过渡声明没落在真正改变 opacity 的那个元素上。比如用 JavaScript 动态加 class 控制显隐，但 transition 却写在父容器或伪元素里——浏览器根本不会对它做渐变插值。
确保以下三点同时满足：
-
transition必须写在目标元素的常态 CSS 规则中（不是 :hover 或 .active 里） - 改变的是该元素自身的
opacity值（别试图靠父级 opacity 间接影响子元素，子元素会继承但不触发自身过渡） - 初始和结束状态都得是明确数值，避免从
unset、inherit或空值切换
button {
opacity: 1;
transition: opacity 0.3s ease-out; /* ✅ 写在这里 */
}
button.hidden {
opacity: 0; /* ✅ 显式设为 0 */
}为什么用 ease-in-out 而不是 linear？缓动影响感知流畅度
人眼对速度变化敏感，linear 的匀速淡出在起始和结束瞬间有“顿挫感”，尤其在 0.2–0.4s 这个常用区间。而 ease-in-out 让透明度变化先慢→快→慢，更贴合视觉惯性。
更精细的控制可直接用贝塞尔曲线：
立即学习“前端免费学习笔记（深入）”；
-
cubic-bezier(0.34, 1.56, 0.64, 1)：比默认ease-in-out更“缓入缓出”，适合轻量 UI 元素 -
cubic-bezier(0.16, 0.87, 0.37, 1.11)：带轻微过冲，让淡入结尾略“弹”一下，避免死板 - 避免用
ease-in做淡入——开头太慢，用户会误以为没响应
.card {
opacity: 0;
transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card.show {
opacity: 1;
}opacity 过渡性能差？换用 transform + visibility 组合
当元素频繁显隐（比如下拉菜单、Tooltip），纯 opacity 过渡可能触发重绘（repaint），尤其在低端设备上掉帧。真正高性能的做法是把透明度变化和布局分离：
- 用
opacity控制视觉透明，保证淡入淡出动画 - 用
visibility: hidden/visible控制是否参与渲染树，避免无谓计算 - 必要时搭配
transform: translateZ(0)或will-change: opacity激活 GPU 加速（但别滥用）
注意：visibility: hidden 不会脱离文档流，如果需要彻底移除占位，得配合 height: 0 + overflow: hidden，但此时不能再用 opacity 过渡——因为元素已不可见。
.tooltip {
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease-out, visibility 0.25s step-end;
}
.tooltip.active {
opacity: 1;
visibility: visible;
}JavaScript 控制时，transition-delay 和强制重排容易踩坑
用 JS 切换 class 后立刻读取 offsetHeight 或 getComputedStyle 是为了强制触发重排，确保浏览器“看到”初始状态再开始过渡。但很多人漏掉这步，导致动画直接跳到终点。
另一个典型问题是：想让淡入延迟 0.1s 执行，却只加 transition-delay，结果发现 delay 期间元素完全没反应——因为 delay 只作用于过渡本身，不控制 class 添加时机。
- 延迟执行应由 JS 控制（
setTimeout或requestAnimationFrame），而非依赖transition-delay - 若必须用 CSS 延迟，记得
transition-delay和transition-duration是独立参数，要一起写全 - 避免在同一个 transition 声明里混用多个属性（如
transition: all 0.3s），会导致无关属性也被过渡，增加意外行为风险
/* ❌ 不推荐 */
.element { transition: all 0.3s; }
.element:hover { opacity: 0.5; transform: scale(1.05); }
<p>/<em> ✅ 推荐：只过渡明确需要的属性 </em>/
.element {
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}过渡的自然感不在时间长短，而在变化节奏是否匹配人眼预期；很多“不自然”其实源于 transition 没写对位置，或 opacity 和 visibility 的职责被混淆了。
