Framer Motion 在移动端点击动画不触发是怎么回事？

长孙艺茹提问于 2026-03-23 08:16:22 阅读 37

移动

我在用 Framer Motion 做一个按钮的点击缩放动画，在桌面浏览器上完全正常，但一到手机上点按就没反应，动画根本不跑。是不是移动端需要额外配置什么？

我已经加了 whileTap，也试过换成 whileHover（虽然知道 hover 在手机上不太行），但都没用。控制台也没报错，就是静悄悄的没效果。

<motion.button
  whileTap={{ scale: 0.95 }}
  className="px-4 py-2 bg-blue-500 text-white rounded"
>
  点我试试
</motion.button>

移动端动画

我来解答赞 7 收藏

反馈

1 条解答

设计师利君 Lv1

移动端点击事件有时候会有点坑，特别是触摸屏上的动画触发。你这个问题可能是 touch 事件的处理问题。试试给你的 motion.button 加个 onTap 事件，看能不能手动触发一下动画。

代码给你

import { motion } from "framer-motion";




  whileTap={{ scale: 0.95 }}

  onTap={() => console.log('Button tapped')}

  className="px-4 py-2 bg-blue-500 text-white rounded"

>

  点我试试

如果 onTap 事件能正常触发，那说明 whileTap 可能需要配合其他属性或者样式。再试试加个 cursor: pointer 样式，确保按钮可以被识别为可点击元素。

代码给你

import { motion } from "framer-motion";




  whileTap={{ scale: 0.95 }}

  className="px-4 py-2 bg-blue-500 text-white rounded cursor-pointer"

>

  点我试试

如果还不行，检查一下是否有其他 CSS 或 JavaScript 影响了按钮的点击行为，有时候 z-index 啥的也会捣乱。

2026-03-23 08:18