在 Framer Motion 中如何消除 AnimatePresence 上的反弹？

Question

在构建运动后使用 Framer Motion，我注意到当循环通过

AnimatePresence

时，

div

会出现反弹。

变体：

const variants = {
  enter: ({ direction, width }) => ({ x: direction * width }),
  center: { x: 0 },
  exit: ({ direction, width }) => ({ x: direction * -width })
};

动画存在：

<Flex flex="1" align="center" justify="center">
  <AnimatePresence
    mode="wait"
    initial={false}
    custom={{ direction, width }}
  >
    <motion.div
      key={index}
      variants={variants}
      initial="enter"
      animate="center"
      exit="exit"
      custom={{ direction, width }}
      w="full"
    >
      // removed code
    </motion.div>
  </AnimatePresence>
</Flex>

参考文档和

Exit animations

具有相同的行为，并在构建我的时用作参考。在

props

下没有看到任何内容来显示如何停止反弹。

代码沙盒

查看了一些现有问题：

• 存在时成帧器运动动画的奇怪行为
• Framer-Motion AnimatePresence 断断续续的动画
• framer-motion AnimatePresence 布局问题
• Framer Motion AnimatePresence 嵌套导入问题
• 无法让 Framer Motion 中的 AnimatePresence 工作
• React js 框架运动 AnimatePresence 在退出时不起作用

在 Framer Motion 中，有办法消除反弹吗？

Answer 1

您可以使用运动元素上的

transition

属性自定义过渡。

transition

属性允许您执行各种动画，包括从弹簧动画中删除反弹。在您的代码中，您使用的是特定于值的转换，它允许您为特定值设置转换。

x

过渡设置为“弹簧”。要消除动画中的反弹，请像这样更新过渡：

transition={{
    x: { type: "spring", bounce: 0 },
    opacity: { duration: 0.2 }
}}

我经常使用这个framer运动可视化工具来获得我想要的弹簧动画。您还可以使用 easing 函数 进行过渡。