Animation of the appearance / disappearance of the block, how to do?

Question

css

Tell me how to make the block appear smoothly, in the middle of the page.
via opacity:0; - does not work correctly, that is, as if the area remains, although not visible, thus blocking other elements
through display: none; - works as it should, but without animation.
How to be?

Answer 1

In the initial state of the block, give z-index: -1; When adding the active class add opacity: 1 and z-index: 1 for example. https://jsfiddle.net/u20cdL3g/

Answer 2

Tried the same with
and when it disappears, make the block size 1px and remove it to the corner, or off the screen. But then the appearance of the block, namely the animation, comes from the place where the block was removed. And it requires a smooth appearance in the center of the screen.