css - 旋转木马样式组件上的 React-spring useTransition 在过渡期间导致重叠

Question

我正在尝试制作一个模态框，它将在轮播式组件中显示几张幻灯片，并在幻灯片更改时制作一些简单的进入/退出动画。我正在使用 useTransition hook来自 react-spring，问题是当发生转换时，有一些时刻传出的幻灯片(淡出)和传入的幻灯片(淡入)都在模态中。这会导致高度加倍的渲染问题，因为两张幻灯片需要共享相同的宽度。

Here is a code sandbox demonstrating the issue

我尝试按照一些在线指南进行操作，但不幸的是，它们似乎适用于旧版本的 react-spring，其中 Hook 的返回值不同。

我还尝试将包含的 div 的样式更改为 position: absolute 以便它允许重叠组件，但是模态没有正确的高度和宽度尺寸来正确显示内容。为了解决这个问题，我尝试过

1. 将维度存储为状态
2. 用大值初始化
3. 将这些 dims 应用到包含幻灯片的 div
4. 保持对 div 的引用，并在 useEffect Hook 中获取实际计算的 dims，然后更新状态 dims

这种方法提供了我想要的效果，但有两个主要问题 - 计算的高度似乎没有正确更新，并且它没有响应视口(viewport)的变化。感觉就像糟糕的响应式设计，尽管有点像我想做的那样。这是一个 sandbox with this workaround .

我对 css 不是很好，我觉得有一些优雅的东西可以解决这个问题，如果你们有任何想法，我将不胜感激🤞🙏

Answer 1

我遇到了同样的问题。通过简单的进入/退出转换。

用 exitBeforeEnter: true property 解决了它:
确保在新元素进入动画之前离开动画的任何元素我注意到它是一个相对 new addition to the library (自版本 9.4.0 起)。

修复了你的沙箱 in this fork .