Анимация появление/исчезновение блока, как сделать?

Question

[kroha3000]

Подскажите как сделать плавное появление блока, по середине страницы.

через opacity:0; - работает не корректно, то есть как бы область остаётся, хотя и не видимая, таким образом блокирует другие элементы

через display:none; - работает так как надо, но без анимации.

Как быть?

Answer 1

[Павел Антонов]

В начальном состоянии блоку дать z-index: -1; Когда добавляете класс active дописать opacity: 1 и z-index: 1 например. https://jsfiddle.net/u20cdL3g/

Comments

[kroha3000]

Спасибо. Решение простое, но вроде эффективное.

Answer 2

[kroha3000]

Пробовал так же через
overflow:hidden; + opacity:0;
и при исчезновении делаем размер блока в 1px убираем в угол, или за пределы экрана. Но тогда появление блока, именно анимация, происходит от того места, куда блок убрали. А требуется, плавное появление в центре экрана.

Comments

[Шохрух Шаймардонов]

Лучше код щалей в песочницу. Прям там и разберемся как решить проблему

[Andrew]

Вопрос можно править.
Вы анимируйте только прозрачность, тогда он не будет улетать.

[kroha3000]

Шохрух Шаймардонов, https://jsfiddle.net/mv5gcwho/ - opacity перекрывает ссылку, даже в не активном состоянии. ссылка не активна выходит.

[kroha3000]

Шохрух Шаймардонов, а в таком варианте https://jsfiddle.net/yed0L1mu/2/ - display:none работает идеально. Но без анимации.

[kroha3000]

Andrew, при анимации только прозрачности (opacity), блок перекрывает все нижние слои. Так как позиционирование появляющегося/исчезающего блока требуется абсолютное.