移动端点击高亮是独立叠加的半透明层，由-webkit-tap-highlight-color控制，与:active、opacity、transform无关；必须显式设transparent禁用，否则覆盖自定义反馈。
移动端点击高亮不是“遮挡”动画效果，而是独立叠加的半透明层，会盖在你所有 CSS 动画之上；它由 -webkit-tap-highlight-color 控制，和 :active、opacity、transform 完全无关，必须显式禁用才能让自定义反馈生效。
为什么 tap-highlight-transparent 类不生效
Tailwind v3.0+ 默认禁用 tap-highlight-color 相关工具类。即使你在 HTML 里写了 class="tap-highlight-transparent"，也不会生成对应 CSS，除非你手动启用：
- 打开
tailwind.config.js，确认corePlugins中未关闭tapHighlightColor（即不能有tapHighlightColor: false） - 配置中需显式启用该插件：
corePlugins: { tapHighlightColor: true } - 改完配置后必须重启开发服务（
npm run dev或pnpm dev），热更新不触发新工具类编译 - 检查生成的 CSS 文件里是否真有
-webkit-tap-highlight-color: transparent，没有就说明配置或构建没生效
不用 tap-highlight-transparent 怎么禁用
如果不想改配置，或项目用的是旧版 Tailwind（v2.x），可直接写内联样式或自定义工具类：
- 在目标元素上加内联样式：
style="-webkit-tap-highlight-color: transparent;" - 或在
@layer utilities中添加：
@layer utilities {
.no-tap-highlight {
-webkit-tap-highlight-color: transparent;
}
}
然后用 class="no-tap-highlight"。注意：这个类只对触摸设备生效，不影响鼠标 hover 或键盘 focus。
禁用后动画仍被“打断”？检查是否误触 :active 样式
很多人以为禁用高亮后，自己写的 active:scale-95 就能顺滑执行，结果发现点击时动画一闪而过或卡顿。常见原因：
-
:active伪类在移动端默认持续时间极短（约 100–200ms），远快于动画 duration，导致视觉上“没动起来” - 某些安卓 WebView 或旧版 Safari 对
:active触发不一致，尤其在position: fixed或transform元素上 - 如果你用 JS 监听
touchstart+touchend手动加类，要防住touchcancel，否则动画状态可能残留 - 更稳的做法：用
data-active配合 JS 切换，再用[data-active] > * { transform: scale(0.95); }控制，完全绕过伪类限制
真正容易被忽略的是：禁用高亮只是移除了系统层干扰，但自定义反馈是否自然，取决于你如何协调 :active 时长、CSS 过渡缓动、以及是否在真机上测试了 touch 延迟与取消行为——模拟器里一切正常，不代表 iOS 实机不会因 scroll 吞掉 touchend。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
