框架-运动，动画时延迟rotateY

Question

我正在使用Framer，我试图找到一种方法来延迟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月对我来说没有意义

我必须在过渡期间更新所有相关属性，以确保它们连续运行：

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>
  )
}

码箱演示