javascript - React JS 中的幻灯片转换和绝对定位

Question

我正在尝试促进 View 转换，其中一个大型容器组件从一侧滑入，而另一个则滑出到另一侧。

我可以让所有离散动画在 react 运动中正常工作，但是，我不知道如何同时处理这两个动画。

本质上，有一点是两个组件同时位于视口(viewport)中。我觉得我对 CSS 布局的了解不足以正确处理这个问题。

我最初的想法是让滑动元素绝对定位在相对定位的容器内。但是，这种绝对定位对于包含在绝对定位容器内的所有组件都有副作用。

这是一个已解决的问题(iOS View 始终来回滑动并在弹出到视口(viewport)时保留布局行为)。

如果有人能给我指出一个很好的资源来理解这个问题，或者给我一些一般性的建议，我们将不胜感激。我的主要问题是我不知道要研究哪些主题或哪些书籍/在线资源可以很好地解释此类问题的解决方案。

Answer 1

我使用了一个名为 react-transition 的很棒的包，听起来它可以处理您提到的情况。在这里查看:https://www.npmjs.com/package/react-transitions你可以在这里看到一个演示:https://szchenghuang.github.io/react-transitions/