当另一个开始运动时触发动画

Question

每当变量 colorHex 发生变化时，我都会使用

motion

来动画背景颜色，效果很好。我还想在每次颜色变化时放大和缩小。为此，我使用了

scale: [1, 2, 1]

但是因为该值永远不会改变，所以它只在初始动画上运行。如何确保每当

colorHex

发生变化时它都会重新触发？

<motion.div
  transition={{ duration: 0.3, delay: offset * 0.1, ease: "easeOut" }}
  animate={{
    backgroundColor: colorHex,
    scale: [1, 2, 1],
  }}
  ...

请注意，我发现的唯一解决方法是在颜色值发生变化时将比例设置为新的（略有不同）值。

Answer 1

您需要做的就是添加一个关键道具。

import "./styles.css";
import { useRef, useState } from "react";
import { motion, useScroll } from "motion/react";

export default function App() {
  const ref = useRef(null);
  const offset = 1;
  const [colorHex, setColorHex] = useState("#f00");

  return (
    <>
      <input
        type="text"
        value={colorHex}
        onChange={(e) => setColorHex(e.target.value)}
      />
      <motion.div
        {/* add colorHex as key */}
        key={colorHex}
        transition={{ duration: 0.3, delay: offset * 0.1, ease: "easeOut" }}
        animate={{
          backgroundColor: colorHex,
          scale: [1, 2, 1],
        }}
        style={{
          height: "50vh",
          width: "50vw",
          margin: "auto",
          background: "#fff",
        }}
      ></motion.div>
    </>
  );
}