Framer Motion：动画不会循环播放

Question

我正在尝试使用 Framer Motion 库在一小段延迟后循环播放动画。动画本身会在加载时播放，在网页刷新时播放，但不会重复。 我浏览了文档，这似乎是相似的语法。

const AnimateTrial = {
  initial: {
    opacity: 0,
    x: -100,
    y: -35,
    scale: 0.9,
  },
  animate: (i) => {
    const delay = 5 + i * 0.5;
    return {
      opacity: 1,
      x: -10,
      y: -35,

      transition: {
        opacity: { delay, duration: 1.5 },
        x: { delay, duration: 1.5},
        repeatType: "Infinity",
        repeatDelay: 5,
      },
    };
  }

有人有想法吗？一切正常减去底部两行！

Answer 1

你的过渡对象内的属性不正确。用repeat代替repeatType，这样写

transition={{ repeat: Infinity, repeatDelay: 5 }}

如果您检查 docs repeateType 属性仅接受 "loop" "reverse" "mirror" 而不是 "Infinity"。