kroha30002019-12-18 12:47:19
kroha3000, 2019-12-18 12:47:19

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

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 the question

In order to leave comments, you need to log in

2 answer(s)
Pavel Antonov, 2019-12-18

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/

kroha3000, 2019-12-18

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.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question