Rewind back to my experience, toggling (showing/hiding) an element is one of the most common tasks in UI, which I have done like below for a long time… (shamefully)

Component toggle UI

I slowly evolved from this to css to perform the toggling.

Css Style

Component toggle UI with classname

While that works, I often lost track of what the actual style looks like when glancing quickly at the code. I kept feeling this is not the best approach to implement animation.

There should be a better and easier way to perform animations in react. So I wrote my own. I present to you react-simple-animate.

React simple animation

A declarative and simple way to perform animation in react. I can control the start of the animation and the styles to apply at the end of the animation. This is a good pattern in my opinion. Hooray!