Как анимировать блок, высота которого меняется через JS?

Question

[DiseaseC]

Есть блок, в котором несколько абзацев. По нажатию на кнопку "Read more" можно показать или скрыть дополнительный текст через изменение высоты, вот как-то так

text.style.maxHeight = (text.style.maxHeight === '300px') ? 'unset' : '300px';

Но вопрос, как в таком случае можно его анимировать?
transition: max-height не работает
Сам блок

.text {
    font-weight: 500;
    margin-bottom: 0.5em;
    font-size: 14px;
    max-height: 300px;
    overflow: hidden;
  }

Comments

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

Код в песочницу заверни и поможем

Answer 1

[Александр]

По умолчанию поставить max-height: 300px, а при нажатии на кнопку установить большое число максимальной высоты, например max-height: 1200px. Анимировать через transition. Это самый простой вариант.

Вариант посложнее: создать ассоциативный массив (элемент -> максимальная его высота), например - Map и заполнять данный массив при загрузке страницы. Максимальную высоту, естественно, высчитывать. При изменении размеров окна пересчитывать максимальную высоту. При нажатии на элемент, брать его максимальную высоту и запоминать его текущую высоту. Менять текущую высоту на максимальную. При повторном нажатии вернуть сохраненную высоту.