Как сделать css-анимацию по раскрытию элемента?

Question

[stasy_ag]

Суть следующая, нужно сделать, чтобы при нажатии нижний блок выползал с анимацией. Не понимаю к чему именно добавить начальные состояния.

Answer 1

[Spaceoddity]

"display: none;" уберите. Это оно анимацию блокирует.
И в свойстве translate - надо указывать единицы измерения.

transform: translateY(0);

- такое не прокатит.

Comments

[stasy_ag]

Но там, где пишу transform: translateY(0); - это уже конечное состояние, элемент возвращается туда, где должен стоять. А "display: none;" - как раз блокирует отображение отзывов сразу, чтобы они открывались только по клику.
Видимо, я чего-то не понимаю

[Spaceoddity]

stasy_ag, display:none; проигнорирует анимацию. элемент не отображен на странице - что тут анимировать? если так уж надо display:none прикрутить - то надо вначале надо ставить ему display:block (ну или что там ещё), затем пускать анимацию появления и наоборот - пускать анимацию скрытия и потому уже display:none;. но городить это придётся через таймер. проще это реализовать через opacity (зачем вам display:none - вы и так элемент скрыли).

А про translateY(0) я уже точно не помню, но вроде где-то натыкался (или это не про анимацию было...) что указание начального и конечного состояния без единиц измерения (или в разных) может заблокировать анимацию - сложно плавно изменять состояние из 5 килограмм в 8 метров.

Ах да, по сути вопроса:
вначале у элемента прописываются начальные состояния и transition, а потом на дополнительном классе прописываются конечные состояния. т.е. transition цепляется к основному классу - чтобы анимировать все изменения, которые навесят с помощью доп. классов. и да, ваш код можно сократить - нет смысла навешивать один класс и снимать другой и наоборот. все это можно сделать с помощью одного класса.
https://codepen.io/nanto-work/pen/NWRPvMy