javascript - 成帧器运动，在 x 动画时延迟旋转 Y

Question

我正在使用 Framer-motion，并且正在尝试找到一种方法来延迟旋转 Y 的动画，同时 x 动画到特定位置然后启动旋转 Y。

这在 Framer 运动中可能吗？

示例:

const variants = {
  flip: {
    rotateY: 0,
    x: -20,
    scale: 1,
    transition: {
      ease: "easeInOut",
      duration: 1.2
    }
  },
  hidden: {
    rotateY: 180,
    x: 150,
    scale: 0.5,
    transition: {
      ease: "easeInOut",
      duration: 1
    }
  }
};

Answer 1

您可以为每个属性配置一个转换。这允许您向 rotateY 添加必要的延迟:

const duration = 1.2;

const variants = {
  flip: {
    rotateY: 0,
    x: -20,
    scale: 1,
    transition: {
      ease: "easeInOut",
      duration,
      rotateY: {
        delay: duration,
        duration
      }
    }
  },
  hidden: {
    rotateY: 180,
    x: 150,
    scale: 0.5,
    transition: {
      ease: "easeInOut",
      duration,
      rotateY: {
        delay: duration,
        duration
      }
    }
  }
};

查看此CodeSandbox .