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