javascript - Framer-motion，在动画 x 时延迟 rotateY

Question

我正在使用 Framer-motion，我正在尝试找到一种方法来延迟 rotateY 的动画，而 x 动画到特定位置然后启动 rotateY。

这在 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。

Answer 2

@amann 上面的帖子在 2020 年 9 月 v2.65 中不适合我

我必须更新过渡中的所有相关属性以确保它们连续运行：

transition: {
      x: {
        ease: "easeInOut",
        duration: duration
      },
      rotateY: {
        duration: duration,
        delay: duration
      }
    }

完整示例：

import * as React from "react";
import { motion } from "framer-motion";
import styled from "styled-components";

const duration = 1.2;

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

const Box = styled(motion.div)`
  background: white;
  border-radius: 30px;
  width: 150px;
  height: 150px;
`;

export const Example = (props) => {
  return (
    <motion.div 
      initial={false}
      animate={props.toggle ? "flip": "hidden"}
    >
      <Box variants={variants} />
    </motion.div>
  )
}

Codesandbox 演示