ios safari快速点击时transition失效，因浏览器合并点击并跳过重绘；应改用transform/opacity、强制offsetheight读取或js控制class替代:active。
为什么iOS上transition在快速点击时突然不生效
iOS Safari（尤其是13–16）对连续触发的click事件有特殊处理：它会把紧邻的两次点击合并为一次，或延迟/丢弃后续的样式变更通知，导致transition没机会启动。本质不是CSS写错了，而是DOM重绘被浏览器跳过或压缩了。
- 典型现象：
element.classList.toggle('active')后，背景色/位移等过渡完全“跳变”，没有动画 - 只在真机或Safari模拟器复现，Chrome桌面/Android正常
- 加
console.log能确认class确实切换了，但视觉没过渡
用transform替代top/left等触发布局重排的属性
布局重排（reflow）在iOS上更易被节流，而transform走合成层，触发更可靠。哪怕只是微小改动，也能绕过Safari对重排类过渡的抑制。
- ❌ 避免：
top: 10px; transition: top 0.3s; - ✅ 改用：
transform: translateY(10px); transition: transform 0.3s; - 同理，用
opacity代替visibility，用scale代替width/height - 如果必须改
height，先设overflow: hidden，再用max-height过渡（但注意iOS对max-height过渡支持不稳定）
强制重绘：在class切换后加offsetHeight读取
这是最直接有效的hack——通过强制读取布局信息，让浏览器“意识到”样式已变，从而触发过渡。iOS Safari看到这个同步读取，就会放弃优化，乖乖执行动画。
- 写法：
el.classList.toggle('active'); el.offsetHeight; // 强制重排，触发transition - 必须放在class操作之后、且不能被JS引擎优化掉（比如不能写成
el.offsetHeight || null） - 不要用
getComputedStyle(el).height，它不一定触发重排；offsetHeight是经过验证最稳的 - 如果用React/Vue，确保在
useEffect或nextTick里执行，避免在diff过程中读取
避免用:active伪类驱动过渡
iOS Safari对:active状态的维持时间极短（常小于100ms），且在快速连点时可能根本不触发，导致依赖它的transition形同虚设。
- ❌ 不要这样：
.btn:active { transform: scale(0.95); transition: transform 0.2s; } - ✅ 改为JS控制class：
.btn.is-pressed { transform: scale(0.95); }，并在touchstart加class、touchend移除 - 注意监听
touchstart/touchend而非click，因为iOS的click有300ms延迟，且连点时行为不可控 - 同时加
user-select: none和-webkit-tap-highlight-color: transparent减少干扰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
