javascript - Framer Motion 的 AnimateSharedLayout 不会交叉淡入淡出，以及如何反向缩放内部元素

我在我的项目中使用 React Router，并且在“概述”页面上有一个专辑卡列表，在“专辑”页面上有相同的专辑卡列表。唯一的区别是专辑页面略宽。

当有人更改路线时，我希望卡片转换到新的位置/尺寸，所以我已经将我的路由器包裹起来<AnimateSharedLayout type="crossfade">并给每张卡片相同的layoutId.

现在，它可以工作了，但我有几个问题，想知道它们是否可以修复（我确定我只是忽略了一些明显的东西）。

我在这里整理了一个精简的示例：https ://codesandbox.io/s/framer-animatesharedlayout-5kdfr （如果您在“概述”和“相册”之间单击，它应该执行转换）。

为什么交叉淡化可能无法正常工作？相反，卡片会立即跳转到末尾组件（我猜它忽略crossfade了AnimateSharedLayout组件中的我并使用它来switch代替？为什么会那样做？）
有没有办法让卡片的内部组件以某种方式反向缩放？（类似于 Matt 在https://www.framer.com/blog/posts/magic-motion/的帖子中的“更正子组件” ）例如，您可以在过渡期间看到文本挤压，即使它的大小相同在开始和结束时。

谢谢！

标签： javascriptreactjsreact-routerframer-motion