Framer Motion 中退出动画的不同过渡

Question

如何在Framer Motion中为退出属性实现不同类型的过渡？

<motion.div
  initial={{opacity: 0, transform: 'scale(0.5)'}}
  animate={{opacity: 1, transform: 'scale(1)'}}
  exit={{opacity: 0, transform: 'scale(0.5)'}}
  /* I want "type" to be different only for the exit animation */
  transition={{ type: "spring", stiffness: 200 }}
></motion.div>

我希望将“spring”过渡用于initialand animate，但对于 exit 我想要不同的类型。退出动画正在工作（我正在使用<AnimatePresence>包装器，但我只是想要不同的退出行为。

Answer 1

您可以直接将过渡属性添加到框架和变体中。将其添加到变体通常会提供更大的灵活性，因为它允许您自定义每个视觉状态的延迟。[1]

<motion.div
  initial={{opacity: 0, transform: 'scale(0.5)'}}
  animate={{opacity: 1, transform: 'scale(1)'}}
  exit={{
    opacity: 0, 
    transform: 'scale(0.5)', 
    transition: { ease: 'easeIn', duration: 10 } 
  }} // transition property only for exit stage
  transition={{ type: "spring", stiffness: 200 }}
></motion.div>

参考：

1. https://www.framer.com/docs/transition/###delaychildren