Как отключить анимацию движения Framer в мобильной версии?

Question

Я пытаюсь создать веб-сайт React с помощью Framer Motion, проблема в том, что созданная мной анимация хорошо выглядит на рабочем столе, но не на мобильных. Итак, планирую отключить анимацию. Как мне это сделать?

Answer 1

Не зная подробностей, я бы порекомендовал использовать для этого варианты . Внутри вашего функционального компонента создайте переменную, которая проверяет мобильные устройства. Затем заполняйте варианты только в том случае, если эта переменная ложна. Обратите внимание, что это не работает при изменении размера страницы. Компонент должен быть отрисован повторно.

Я создал для вас коробку с кодами, чтобы вы ее опробовали!

Для получения дополнительной информации о вариантах, проверьте этот курс

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 на рабочем столе без анимации. На мобильном я хочу наоборот. Это работает на меня отлично. Надеюсь, это тоже поможет.

Даниэль

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';

Тот же принцип, что и другие ответы, просто полный пример.