Framer Motion 持续时间属性不影响动画运行时间

Question

我正在尝试使用 Framer Motion 来制作一个正方形的动画，以同时放大和淡入，如下所示：

function App() {
  const planBoxControls = useAnimation();

  useEffect(() => {
    setTimeout(() => {
      planBoxControls.start({
        opacity: 1,
        scale: 1,
        transition: {
            delay: 0,
            duration: 100000,
            opacity: { ease: 'linear' },
            scale: { ease: 'backOut' },
        },
    });
    }, 5000);
  }, []);

  return (
    <div className="App">
      <motion.div style={{width: "500px", height: "500px", border: "5px solid red"}} initial={{ opacity: 0, scale: 0.4 }} animate={planBoxControls}></motion.div>
    </div>
  );
}

我一直在尝试使用

duration

属性将其设置为不同的值，但这似乎并不影响动画运行所需的时间 - 它运行得非常快（< 1s) no matter what. If anybody might have a solution, I'd really appreciate the help. Thank you!

Answer 1

您必须在transition.opacity和transition.scale中传递持续时间和延迟，正如您提到的那样

useEffect(() => {
      setTimeout(() => {
        planBoxControls.start({
          opacity: 1,
          scale: 1,
          transition: {
              delay: 0,
              duration: 5,
              opacity: { ease: 'linear' ,duration:5},
              scale: { ease: 'backOut',duration:2 },
          },
      });
      }, 5000);

您将从这段代码中得到缓慢的效果。 如果您从过渡属性中删除不透明度和缩放，您编写的代码也将起作用。