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

Question

I have been breaking my head trying to figure out how to accomplish something that I figured would be quite simple (I know...)

Goal is for a very minimal , and reusable modal component that I can animate in some sort of HOC with a trigger button or w/e.

I am creating it using createPortal, and the goal is to have some simple animations be added to on enter/ exit of said portal.

I have gotten this to work using GSAP, but ideally I would love for this to go along with SC instead so that I don't have to pull in another animation library.

For the life of me I just cannot get this to work with SC and would love if someone could point me in the right direction.

I have made a sandbox here: https://codesandbox.io/s/r44w9m4o5p using GSAP to run the animations, and it's a bit hacky but it is in the proper direction for what I am going for.

Also, is there a benefit to using react-transition-group over something like https://github.com/react-tools/react-move ?

Answer 1

You can use the CSSTransition component instead of Transition . CSSTransition will just toggle approriate class names using given animation timings: .*-enter , .*-enter-active for in-transition and .*-exit , .*-exit-active for out-transition. So you can define all transitions using CSS3 properties with styled-components .

Take a look at my fork: https://codesandbox.io/s/zz95v5103

I've just extended your Modal with transition styles. Note that extending styles requires className property for the component to be extended , so I've added that property to your Modal component.