reactjs - 如何在移动视图中关闭 Framer Motion 动画？

Question

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

Answer 1

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

我已经创建了一个代码框供您试用！

有关变体的更多信息，请查看本课程

Answer 2

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

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。在移动设备上，我想要相反。这对我来说很完美。希望这也有帮助。

丹尼尔