есть ли ошибка в атрибуте повтора фреймера/движения?

#reactjs #framer-motion

Вопрос:

Я пару раз пытался запустить приведенный ниже код, как локально, так и в codesandbox. Анимация повтора h1 просто не работает, что-то не так с моим кодом или это ошибка атрибута повтора для движения?

 import React from "react";

import { motion } from "framer-motion";
import "./styles.css";

export default function App() {

  return (
    <motion.div>
      <motion.h1
        initial={{ y: -200 }}
        animate={{ y: -10 }}
        transition={{ repeat: Infinity, duration: 2 }}
      >
        Test
      </motion.h1>
    </motion.div>
  );
}

 

Проверьте код на Codesandbox

Ответ №1:

Наверное, это проблема с вашим CSS. Я создал пустой проект: https://codesandbox.io/s/sleepy-sanne-kd5cl?file=/src/index.js.

И это работает просто отлично.

Я просто копирую один за другим в пустой проект. Вилка не работает. Пожалуйста, ознакомьтесь с демонстрацией в реальном времени: https://kd5cl.csb.app/

Все дело в framer-motion упаковке. Upgrade это последняя версия или 4.1.17 , в настоящее время вы ее используете 2.0.0

Комментарии:

1. Не могли бы вы найти проблему с css, пожалуйста, на данный момент я не вижу никакой разницы между вашим Codesandbox и моим

2. @LittleTeemo Речь идет о пакете framer-motion. Обновите его до последней версии или версии 4.1.17, в настоящее время вы используете 2.0.0, пожалуйста, проверьте мой обновленный ответ.

3. Большое спасибо, у меня есть относительные пакеты обновления фреймера-движения и реакции. Теперь вопрос решен.