#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. Большое спасибо, у меня есть относительные пакеты обновления фреймера-движения и реакции. Теперь вопрос решен.