使用 ReactDOM createPortal 动画 react-transition-group

Question

我一直在努力弄清楚如何完成我认为很简单的事情（我知道......）

目标是创建一个非常小的、可重用的模态组件，我可以使用触发按钮或 w/e 在某种 HOC 中对其进行动画处理。

我正在使用 createPortal 创建它，目标是在进入/退出所述门户时添加一些简单的动画。

我已经使用 GSAP 让它工作了，但理想情况下，我希望它与 SC 一起使用，这样我就不必引入另一个动画库。

对于我的生活，我只是无法让它与 SC 一起工作，如果有人能指出我正确的方向，我会很高兴。

我在这里做了一个沙箱：https : //codesandbox.io/s/r44w9m4o5p使用 GSAP 来运行动画，它有点笨拙，但它是我想要的正确方向。

另外，使用 react-transition-group 比https://github.com/react-tools/react-move有什么好处吗？

Answer 1

您可以使用该CSSTransition组件来代替Transition. CSSTransition将仅使用给定的动画计时切换适当的类名称：.*-enter，.*-enter-active用于过渡，.*-exit，.*-exit-active用于过渡。因此，您可以使用 CSS3 属性和styled-components.

看看我的叉子：https ://codesandbox.io/s/zz95v5103

我刚刚Modal用过渡样式扩展了您的功能。请注意，扩展样式需要要className扩展的组件的属性，因此我已将该属性添加到您的Modal组件中。