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

【问题标题】：Framer-motion, delay rotateY while animating xFramer-motion，在动画 x 时延迟 rotateY
【发布时间】：2020-03-24 05:04:30
【问题描述】：

我正在使用 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
    }
  }
};

【问题讨论】：

标签： javascript framer-motion

【解决方案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。

【讨论】：

这正是我所追求的。我不知道你可以通过财产来做到这一点。谢谢。

【解决方案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 Demo

【讨论】：