使用 ReactDOM createPortal 为 react-transition-group 设置动画

Posted 2023-03-07

【中文标题】使用 ReactDOM createPortal 为 react-transition-group 设置动画

【英文标题】：Animating react-transition-group with ReactDOM createPortal

【发布时间】：2019-07-07 10:33:26

【问题描述】：

我一直在试图弄清楚如何完成我认为非常简单的事情（我知道......）

目标是一个非常最小且可重用的模态组件，我可以使用触发按钮或w/e在某种HOC中制作动画。

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

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

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

我在这里制作了一个沙箱：https://codesandbox.io/s/r44w9m4o5p 使用 GSAP 运行动画，虽然有点 hacky，但对于我的目标来说它是正确的方向。

另外，使用 react-transition-group 比 https://github.com/react-tools/react-move 之类的东西有好处吗？

【参考方案1】：

您可以使用CSSTransition 组件代替Transition。 CSSTransition 将使用给定的动画时间切换适当的类名：.*-enter、.*-enter-active 用于过渡，.*-exit、.*-exit-active 用于过渡。因此，您可以使用 styled-components 的 CSS3 属性定义所有过渡。

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

我刚刚用过渡样式扩展了您的Modal。请注意扩展样式 requires className property for the component to be extended，因此我已将该属性添加到您的 Modal 组件中。

【讨论】：

是否有理由使用styled-components 而不仅仅是使用 CSS/sass（除了能够注入持续时间？）？

@Simon，您可以使用任何样式方法。没有使用样式组件的具体原因。