transition必须写在常态选择器中，确保进入和离开均有动画；避免使用transition: all，应显式声明color、background-color等需过渡的属性；transform需设初始值如scale(1)；Safari和旧iOS需注意background简写和-webkit前缀兼容性。
transition 必须写在常态选择器里，不能只放在 :hover 中
很多人把 transition 写在 :hover 规则里，结果 hover 进去有动画、移出来却“啪”一下跳回原状——这是因为浏览器只在 hover 状态下知道怎么过渡，离开时没定义规则，就用默认的“无过渡”直接回退。
在 CSS Modules 中尤其明显：类名被哈希化后，样式隔离更严格，:hover 里的 transition 完全不影响离开行为。
正确做法是把 transition 放在基础类名规则中（即未 hover 的状态），确保进入和离开都走同一套参数。
避免用 transition: all，显式列出要过渡的属性
transition: all 0.3s ease 看起来省事，但在 CSS Modules 场景下极易出问题：
• 它会让 padding、border、font-size 等布局属性也参与过渡，而这些变化会触发重排（layout thrashing），尤其在组件复用多、嵌套深时卡顿明显
• 模块化后样式作用域受限，all 可能意外包含父级继承来的、你根本没意识到的属性
• 调试困难：hover 时某个边框突然变粗又缩回去，你得翻遍所有层级才能定位源头
推荐写法：transition: color 0.2s ease, background-color 0.2s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
transform 过渡必须声明初始值，否则首次 hover 会突变
CSS Modules 不改变 CSS 渲染逻辑，但放大了隐式状态的问题。比如你只在 :hover 里写 transform: scale(1.1)，常态下没声明 transform，浏览器首次 hover 就会从 none → scale(1.1)，产生“闪一下再放大”的突变感。
解决方法很简单：
• 在常态规则中显式写 transform: scale(1)（哪怕值就是默认）
• 同理，如果要用 translateY，常态也得写 transform: translateY(0)
• 注意：不要用 transform: none，它和 transform: scale(1) 在插值计算上不等价，部分浏览器会 fallback 到跳变
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
Safari 和旧版 iOS 兼容性坑点
CSS Modules 本身不引入兼容性问题，但组合使用时容易暴露底层缺陷：
• Safari 对 background 简写（含渐变）的 transition 支持不稳定，经常静默失效 → 改用单独的 background-color 或 opacity
• iOS 13–15 的 WebKit 仍可能忽略未加 -webkit- 前缀的 transform 过渡 → 如果目标用户含老设备，保留 -webkit-transform: scale(1) 和 -webkit-transition 更稳妥
• will-change: transform 能提前提示合成层，但别滥用：每个加了它的元素都会占用额外 GPU 内存，模块化组件批量渲染时容易撑爆内存
立即学习“前端免费学习笔记（深入）”；
真正难的不是写对那几行transition，而是判断哪些属性变化会悄悄触发重排、哪些会被硬件加速、哪些在模块化作用域里被意外继承或覆盖——这些细节在开发时看不见，只在上线后某个按钮卡顿、某次 hover 闪烁时才冒出来。 
