transition 不能直接作用于 opacity 的常见误解在于未显式改变 opacity 值，必须有明确起始（如 opacity: 1）和结束值（如 opacity: 0.4）切换才能触发过渡。
transition 不能直接作用于 opacity 的常见误解
很多人写 transition: opacity 0.3s 却发现没效果，其实不是语法错，而是 opacity 值本身没变——比如元素初始就是 opacity: 1，又没在 :hover 或 class 切换时显式改它，过渡自然不会触发。
关键点在于：transition 只响应「属性值变化」，不负责「初始化动画」。必须有明确的起始值和结束值切换，比如从 opacity: 1 → opacity: 0.4。
- 确保目标元素有明确的初始
opacity（不要依赖浏览器默认值） - 用 :hover、
class切换或 JS 修改style.opacity来触发变化 - 避免同时设置
opacity: inherit或opacity: unset，它们无法参与过渡计算
opacity 过渡必须搭配可触发状态变更的选择器
纯 CSS 实现透明度过渡，最常用的是 :hover，但要注意父容器是否遮挡、是否设置了 pointer-events: none，否则伪类根本不会生效。
下面这个例子是可靠写法：
.fade-box {
opacity: 1;
transition: opacity 0.25s ease-in-out;
}
.fade-box:hover {
opacity: 0.6;
}
- 必须写明起始
opacity，哪怕和默认值一样（1） -
ease-in-out比linear更自然，但若要精确控制节奏，可用cubic-bezier(0.34, 1.56, 0.64, 1) - 移动端需额外加
touch-action: manipulation避免点击延迟导致过渡卡顿
opacity 和 visibility 混用时的隐藏陷阱
有人想“淡出后彻底隐藏”，于是这样写：
.box {
opacity: 1;
visibility: visible;
transition: opacity 0.3s;
}
.box.hidden {
opacity: 0;
visibility: hidden;
}
问题来了：visibility 不支持过渡，所以元素会在 opacity 动画结束瞬间「啪」地消失，视觉上断层。更糟的是，如果 JS 在动画中途就加了 .hidden，opacity 还没到 0 就被强制截断。
- 如需彻底隐藏且保持过渡连贯，改用
opacity+pointer-events: none（禁用交互）+will-change: opacity（提示渲染优化） - 若必须用
visibility，应在transitionend事件里再设visibility: hidden，JS 控制才可靠 -
opacity: 0的元素仍占布局、可被聚焦、能响应事件，这点常被忽略
transition-duration 太小或太大都容易翻车
小于 0.12s 的过渡人眼几乎看不出渐变，等于白设；大于 0.4s 又容易让用户觉得“卡”或“反应慢”，尤其在按钮反馈这类高频交互中。
- 按钮悬停推荐
0.18s–0.25s，模态框淡入推荐0.3s（配合 transform 更稳） - 避免对大量元素批量加
transition，会引起重绘压力，尤其是低配安卓机 - 用
prefers-reduced-motion媒体查询兜底：@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } }
opacity 过渡看着简单，但真正稳定跑在各种设备和交互路径下，得抠清楚起始状态、触发时机、隐藏逻辑和动效节奏这四点。少一个，用户就可能看到闪、卡、断或误触。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
