如何在移动视图中关闭 Framer Motion 动画？答案

【问题标题】：How do I turn off Framer Motion animations in mobile view?如何在移动视图中关闭 Framer Motion 动画？
【发布时间】：2021-09-12 15:15:24
【问题描述】：

我正在尝试使用 Framer Motion 创建一个 React 网站，问题是我的动画在桌面视图中看起来不错，但在移动端却不是。现在我想禁用动画。我该怎么做？

【问题讨论】：

标签： reactjs framer-motion react-intersection-observer

【解决方案1】：

在不了解更多细节的情况下，我建议为此使用 Variants。在您的功能组件中，创建一个检查移动设备的变量。然后，仅当此变量为 false 时才填充变体。请注意，调整页面大小时它不起作用。组件必须重新渲染。

I've created a codesandbox for you to try it out!

有关变体的更多信息，check this course

【讨论】：

是的，这就是我一直在寻找的！欣赏它，伙计！
在 SO 上，如果答案符合您的需要，您应该将其标记为已接受。只需点击勾号即可。
谢谢提醒，完全忘记了。

【解决方案2】：

当这个确切的问题出现时，我自己做了另一种简单的方法。下面我们使用 三元运算符 生成一个对象，然后我们使用 spread syntax

进行传播

const attributes = isMobile ? {
    drag: "x",
    dragConstraints: { left: 0, right: 0 },
    animate: { x: myVariable },
    onDragEnd: myFunction
} : { onMouseOver, onMouseLeave };

<motion.div {...attributes}> {/* stuff */} </motion.div>

如您所见，我希望在桌面上使用没有动画的 onMouseEnter 和 onMouseLeave。在移动设备上，我想要相反。这对我来说很完美。希望这也有帮助。

丹尼尔

【讨论】：