移动端:active伪类未触发是因ios safari等默认不激活，需满足button/a/带tabindex的div或声明cursor:pointer/touch-action:manipulation；transition须写在常态规则中且背景色起点须显式定义。
移动端:active伪类根本没被触发
这不是transition写错了，而是浏览器压根没进:active状态。iOS Safari和部分安卓WebView默认不激活:active，除非元素满足以下任一条件：button、a、带tabindex的div，或显式声明了cursor: pointer / touch-action: manipulation。纯div加:active { background-color: red; }在真机上大概率静默失效。
解决方法：
- 给元素加
touch-action: manipulation（推荐，语义明确且能消除300ms点击延迟） - 或者加
cursor: pointer（兼容性更广，但语义稍弱） - 避免依赖
ontouchstart=""这类空属性——它虽能“骗”出:active，但已被现代实践淘汰
transition没写在基础选择器里
常见错误是把transition塞进:active或:hover规则中，比如.btn:active { background-color: #007bff; transition: background-color 0.2s; }。这样只有激活时声明存在，离开后transition就断了，移出时直接跳变。
必须写在常态规则中：
.btn { background-color: #fff; transition: background-color 0.2s ease; }.btn:active { background-color: #007bff; }- 用DevTools的Computed面板确认
transition-property始终存在，而不是只在:active下出现
背景色起始值未显式定义
如果初始状态没写background-color，而是靠继承或浏览器默认（比如transparent），transition会因“起点不可知”而失效。哪怕你只想要个微弱反馈，也得写明起点。
正确写法示例：
.btn {
background-color: #fff; /* 必须显式写，不能省略 */
transition: background-color 0.2s ease;
}
.btn:active {
background-color: #e9ecef; /* 同类型颜色值：全用hex或全用rgb() */
}
- 起始和结束颜色格式必须一致：
#007bff→#e9ecef✅，rgb(255, 0, 0)→#ff0000❌ - 别用
transition: all 0.2s——box-shadow、border等意外变化会被拖进动画，造成卡顿
transform动画在移动端闪屏或偏移
用transform: scale(0.95)做点击反馈时，在iOS Safari或低端安卓机上容易闪屏、错位甚至累积偏移，根本原因是渲染层未启用GPU加速，或父容器overflow: hidden裁切了动画区域。
关键补丁：
- 加
will-change: transform或transform: translateZ(0)强制硬件加速 - 确保父容器没有
overflow: hidden，且z-index足够高（≥999） - 动画结束后必须归位到
transform: scale(1)，不能靠浏览器自动重置——浮点误差会在多次点击后放大 - 热区不够？用
::after伪元素扩展点击范围：inset: -12px; pointer-events: auto;，别靠padding硬撑
真正卡住人的，从来不是transition语法本身，而是不同机型对:active触发时机的差异、颜色插值精度的分歧、以及GPU合成策略的隐式开关。真机测试前，先确认touch-action和基础transition位置是否稳了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
