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

Question

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

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

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

我已经使用GSAP来实现这一点，但理想情况下我会喜欢这样与SC一起使用，这样我就不必再引入另一个动画库了。

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

我在这里制作了一个沙盒： https ： //codesandbox.io/s/r44w9m4o5p使用GSAP来运行动画，它有点hacky但是它正朝着我想要的方向前进。

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

Answer 1

您可以使用CSSTransition组件而不是Transition 。 CSSTransition将使用给定的动画时序切换适当的类名： .*-enter ， .*-enter-active用于转换的.*-enter-active和.*-exit ， .*-exit-active用于输出转换的.*-exit-active 。 因此，您可以使用带有styled-components CSS3属性定义所有过渡。

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

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