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 的 post 在 2020 年 9 月 v2.65

中对我不起作用

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

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 Demo

Framer-motion，在为 x 设置动画时延迟 rotateY

Framer-motion, delay rotateY while animating x

javascript

framer-motion