How to apply transition when adding or removing dom?

How to apply transition when adding or removing dom?

If you look at SPA libraries such as Vue, there is a function to apply a transition when conditionally rendering a component.

I would like to implement it in pure JavaScript like this, but I am having a hard time because the related articles are based on jQuery.

How do I implement it? I know that transition is not applied even if I add DOM or change display:none to block.. I want to know how.

I don’t want keyframe animations