Framer-motion, задержка rotateY при анимации x

Question

Я работаю с Framer-motion, и я пытаюсь найти способ отложить анимацию rotateY, пока x анимируется в определенное положение, а затем запускает rotateY.

Возможно ли это во Framer motion?

Пример:

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 г., версия 2.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

Answer 3

Вы можете указать конкретные значения для каждого перехода. Таким образом, вы можете управлять ими по отдельности следующим образом:

      transition={{ 
  rotate: { duration: 1 }, 
  scale: { duration: 0.2 } 
}}