Awesome animated popup in React using CSS transitions only.
Popups are very useful to show additional information on a page. But you may have to add another package to do so, or even if the styling library you are using like bootstrap or semantic UI you may not like the style or it may not fit your use case.
There is a quick way around it because you can create stunning popups with animation using just simple CSS and a little bit of JS.
The first thing is what you want your popup to look like. I wanted it to come from bottom and feel like it is attached to the screen:
To make this container you just have to write very simple CSS:
I just set the border radius, fixed the position at the bottom of the container. Minimum height is set to 100px and maximum height is up to 70 VH which is defined in the content class which you will see below. This helps in reusability and fits any type of content from small to large perfectly. You may have noticed I haven’t added the box shadow, you will know the reason shortly.
These two classes are to toggle between the two stages. In the open state you just have to add the box-shadow. The reason of adding it here is that you shouldn’t have a slight shadow at the bottom once the popup is closed. In the close CSS class you just have to push the popup out of the screen by translating Y to 100%. Then you just have to write simple JS to toggle between these classes.
The toggling and toggling state is decided from the parent and you just have to render any type of children in the popup-container component. Since the popup has a min and max height so it fits any type of content. For content larger than the size of the popup just add scroll. You may have noticed the div with the class content its CSS is as follows:
Once you have completed all that you will get a nice popup container:
As you can see the container fits the size of the content perfectly in any case of small or large content. Go ahead and try your own popups and CSS animations. For better understanding you can check the git repo it has both implementation for React and Angular.
