常见错误是漏写transition声明或写错位置，必须在默认状态声明transition: opacity时长函数，且避免与display/visibility混用，多属性过渡需显式列出。
transition + opacity 实现淡入淡出，为什么加了却没反应？
常见错误是只写 opacity: 0 和 opacity: 1，但漏掉 transition 声明，或者写在错误的元素状态上。transition 必须作用于「起始态」元素，且要明确指定过渡属性和时长。
- 必须在默认状态（比如未 hover、未添加 class 时）就声明
transition: opacity 0.3s ease; -
opacity是可过渡属性，但display: none不可过渡——切记不能用display控制显隐再配transition - 如果用 JS 切换 class 触发动画，确保 class 只改
opacity，别顺手把visibility或height也一起改了，否则可能中断过渡
.element {
opacity: 0;
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.element.show {
opacity: 1;
}
淡入后想保持可见，但鼠标移开又自动淡出，怎么控制触发时机？
本质是 CSS 状态切换的边界问题：hover、focus、class 切换是否及时、是否被覆盖。
-
:hover类型的淡入淡出最易失效，因为移出瞬间就重置opacity，用户来不及点击；建议改用 JS 控制 class，比如is-visible - 若用
setTimeout自动隐藏，注意不要在动画中途强制移除 class，否则会跳变；应监听transitionend事件再操作 - 多个同级元素同时淡入时，避免用
transition: all 0.3s——它会把所有变化（包括 background-color、transform）都套上过渡，干扰预期效果
移动端 Safari 淡入卡顿或闪一下，怎么兼容？
iOS Safari 对 opacity 过渡有渲染优化限制，尤其在低性能设备或复合层未启用时。
- 加
will-change: opacity提前提示浏览器该属性将变化（仅在必要时加，别滥用） - 避免和
position: fixed或频繁 scroll 的容器嵌套，容易触发重绘瓶颈 - 不要对
body或全屏遮罩直接设opacity过渡，改用transform: translateZ(0)强制 GPU 加速（配合 opacity 更稳） - 测试时打开 Safari 开发者工具 → “Rendering” → 勾选 “Paint Flashing”，看是否整块重绘
想淡入的同时上下滑动，transition 能叠加多个属性吗？
可以，但必须显式列出，transition: all 不可靠，尤其跨浏览器时行为不一致。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
transition: opacity 0.3s ease, transform 0.3s ease; - 两个属性过渡时长、缓动函数可以不同，但需一一对应；顺序无关，但缺失某项会导致那个属性无动画
- 如果用
transform: translateY(-10px)搭配opacity: 0实现“上滑+透明”入场，注意初始状态也要设好transform: translateY(-10px)，否则第一帧会从 0 开始突兀位移 - 动画中若涉及高度变化（如
max-height），别指望它和opacity同步流畅——max-height过渡天生不精准，优先用transform+opacity组合
过渡本身很简单，难的是状态管理、中断处理和跨端一致性。特别是 JS 控制 class 时，加类、删类、节流、事件监听这几个点，一不小心就让动画“抽风”。
