移动端浏览器/视图中Nuxtjs+TailwindCSS实现的按钮点击动画卡顿

问题根因 #

移动端浏览器对active/hover伪类的触发逻辑与桌面端存在差异：

• 遗留的300ms双击缩放检测机制会导致active状态触发滞后，快速点击时来不及触发动画
• 移动端无真实hover行为，配置的hover样式会出现粘滞，覆盖active动画效果
• transition-all会过渡所有属性，移动端渲染性能不足容易导致动画丢帧

修复方案 #

1. 手动绑定交互事件替换原生伪类，直接用触摸/鼠标事件控制激活状态，避免伪类触发延迟的问题
2. 限制hover样式仅在桌面端生效，规避移动端hover粘滞冲突
3. 优化动画性能，替换transition-all为指定属性过渡，减少浏览器渲染开销

修复后代码示例 #

<template>
  <button
    @touchstart="isActive = true"
    @touchend="isActive = false"
    @touchcancel="isActive = false"
    @mousedown="isActive = true"
    @mouseup="isActive = false"
    @mouseleave="isActive = false"
    class="p-1 bg-gray-800 ring-2 ring-gray-800 ring-offset-4 rounded-full shadow-md text-gray-200 transform linear duration-75 will-change-transform"
    :class="[
      fullColor,
      'transition-[transform,box-shadow,color]',
      isActive ? 'text-gray-100 shadow scale-95' : '',
      '@hover:scale-105 @hover:shadow-lg'
    ]"
  >
    <slot></slot>
  </button>
</template>

<script setup>
import { ref } from 'vue'
const isActive = ref(false)
const props = defineProps({
  fullColor: {
    type: String,
    default: ''
  }
})
</script>

可选补充配置 #

如果仍有触发滞后问题，在全局样式中添加如下规则：

body {
  -webkit-tap-highlight-color: transparent;
}
* {
  touch-action: manipulation;
}

内容的提问来源于stack exchange，提问作者Intoxic8edOne