Обратная анимация при нажатии с использованием Framer Motion

Как я могу активировать repeatType при нажатии?

<motion.div
  animate={{ rotate: 180 }}
  transition={{
    repeat: 1,
    repeatType: "reverse",
    duration: 2
  }}
/>

reactjs framer-motion
person Dave Inoc    schedule 10.04.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот пример

Код:

import * as React from "react";
import { render } from "react-dom";
import { Frame, useCycle } from "framer";

export function MyComponent() {
  const [animate, cycle] = useCycle(
    { scale: 1.5, rotate: 0 },
    { scale: 1.0, rotate: 180 }
  );
  return (
    <Frame
      animate={animate}
      transition={{ duration: 2 }}
      onTap={() => cycle()}
      size={150}
      radius={30}
      background={"#000"}
    />
  );
}

const rootElement = document.getElementById("root");
render(<MyComponent />, rootElement);

Обратите внимание, что у вас есть 2 свойства для движущихся объектов: animation и transition. Animation - анимация объекта, transition - как / когда будет работать анимация. Я рекомендую вам строго разделять эти 2 свойства, и все поведение всегда описывать при переходе, сохраняя анимацию только для анимации.

person ChilTest    schedule 15.04.2021