css – React animation inline styling

You may use the inlined types, however you can’t obtain the specified conduct with out the usage of CSS or a 3rd occasion library doing the animations for you.

I’d suggest to take a look at this: https://www.w3schools.com/css/css3_animations.asp

One other drawback that I see:

You’re displaying the content material solely as quickly because the “toggle” property is true, however for animations it’s good to have completely different states in your markup to be able to transition to completely different states of animation.

E.g.

1. <div className="opening">
2. <div className="opened">
3. <div className="closing">
4. <div className="closed"> (or faraway from DOM)

Then you’ll be able to apply the CSS @keyframes to all completely different levels utilizing the corresponding CSS selectors.

Or if you happen to do not wish to dig into CSS your self. You should utilize e.g. this library to do the job: https://react-spring.dev/