Как сделать изменение структуры блока?

Question

[kasajir]

Есть блок c фиксированной шириной и высотой. В нём картинка и текст(в h2). Нормально ли будет, если я при клике на блок буду задавать картинке и тексту no-displey, а элементам(p, input, button) которые должны быть после клика displey block? И как это анимировать, чтобы первый вариант подал в низ, а в место него появлялся второй вариант блока?

Answer 1

[Stalker_RED]

Так? https://jsfiddle.net/08rpzwhu/1
https://jsfiddle.net/08rpzwhu/2/

h2 поверх контента (position: absolute).
При клике добавляется класс, в котором блок сдвинут.
Плавность за счет transition.

Comments

[kasajir]

А можно без позиции абсолют это сделать? С заменой отображения, и анимацию как-то добавить? А то слетает всё.

[Stalker_RED]

kasajir, можно без абсолют, но все равно нужно решить
1. как вы перекроете контент, который "снизу"
2. какое свойство вы будет анимировать

[kasajir]

Stalker_RED, Так если без абсолют, а с relative, то текст съезжает. В вашем примере.

[Stalker_RED]

kasajir, в моем не съезжает. Если вы что-то пытаетесь переделывать, и не получается, то покажите что-ли код.

[kasajir]

Stalker_RED, структура такая примерно должна быть - https://codepen.io/anon/pen/dJYmOe . Но нужно, чтобы при клике на весь блок картинка с title и post title уезжали и появлялись инпуты и кнопки.

Answer 2

[Exploding]

Обернуть каждый "вариант" в свой wrapper. Подключить animate.css и переключать классы для анимации блоков.
В css определить сочетания классов из библиотеки со своими, чтобы блоки при скрытии были display:none т.к. классы анимации только изменяют opacity:0 и блоки доступны для кликов и т.д.