5

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

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

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

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

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

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

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

4

1 回答 1

4

您可以使用CSSTransition组件代替Transition. CSSTransition只会使用给定的动画时间切换适当的类名：.*-enter,.*-enter-active用于过渡和.*-exit,.*-exit-active用于过渡。因此，您可以使用带有styled-components.

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

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

于 2019-02-14T08:07:01.553 回答