我一直在绞尽脑汁试图弄清楚如何完成一些我认为很简单的事情(我知道......)
目标是获得一个非常最小和可重用的模态组件,我可以使用触发按钮或w/e在某种HOC中为其设置动画。
我正在使用 createPortal 创建它,目标是在进入/退出所述门户时添加一些简单的动画。
我已经使用 GSAP 让它工作,但理想情况下我希望它与 SC 一起使用,这样我就不必引入另一个动画库。
在我的一生中,我就是无法让它与 SC 一起工作,如果有人能给我指出正确的方向,我会很高兴。
我在这里做了一个沙箱:https://codesandbox.io/s/r44w9m4o5p使用 GSAP 来运行动画,这有点老套,但它是我想要的正确方向。
此外,使用react-transition-group比https://github.com/react-tools/react-move有什么好处吗? ?
最佳答案
您可以使用 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
组件中。
关于reactjs - 使用 ReactDOM createPortal 制作 React-transition-group 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54672784/