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

Question

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

Answer 1

在不了解更多详细信息的情况下，我建议使用变体。在功能组件中，创建一个用于检查移动设备的变量。然后，如果该变量为false，则只填充变量。请注意，当您调整页面大小时，它不起作用。必须重新绘制组件。

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

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

Answer 2

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

const attributes = isMobile ? {
drag: "x",
dragConstraints: { left: 0, right: 0 },
animate: { x: myVariable },
onDragEnd: myFunction
} : { onMouseOver, onMouseLeave };
<motion.div {...attributes}> {/* stuff */} </motion.div>

正如你所看到的，我想要鼠标输入&onMouseLeave在桌面上，没有动画。在手机上，我想要相反的。这对我来说是完美的。希望这也有帮助。

Daniel

Answer 3

我们就是这样做的：

import {
type ForwardRefComponent,
type HTMLMotionProps,
motion as Motion,
} from 'framer-motion';
import { forwardRef } from 'react';
const ReducedMotionDiv: ForwardRefComponent<
HTMLDivElement,
HTMLMotionProps<'div'>
> = forwardRef((props, ref) => {
const newProps = {
...props,
animate: undefined,
initial: undefined,
transition: undefined,
variants: undefined,
whileDrag: undefined,
whileFocus: undefined,
whileHover: undefined,
whileInView: undefined,
whileTap: undefined,
};
return <Motion.div {...newProps} ref={ref} />;
});
export const motion = new Proxy(Motion, {
get: (target, key) => {
if (key === 'div') {
return ReducedMotionDiv;
}
// @ts-expect-error - This is a proxy, so we can't be sure what the key is.
return target[key];
},
});
export {
AnimatePresence,
type Variants,
type HTMLMotionProps,
type MotionProps,
type TargetAndTransition,
type Transition,
type Spring,
} from 'framer-motion';

和其他答案的原理一样，只是完整的例子。