framer-motion AnimatePresence布局问题

Question

我在使用framer-motion AnimatePresence component时遇到了问题。

在幻灯片之间切换时，幻灯片的布局会“收缩”一段时间，然后恢复到所需的尺寸。经过一些调试，我很确定这是因为AnimatePresence同时渲染两张幻灯片的时间很短，但是我没有设法解决这个问题。

这是一个sandbox demonstrating the issue。

Answer 1

如果你不想使用beta特性，你可以在exit变量上设置一个延迟。

此外，可能需要将幻灯片定位为绝对位置。

https://codesandbox.io/s/infallible-ganguly-38mmc

Answer 2

使用new beta exitBeforeEnter prop做到了这一点：

<AnimatePresence exitBeforeEnter>
  ...
</AnimatePresence>