Советы ИИ по анимации в JS

Я сейчас занимаюсь разработкой страницы для предоплаты заказа банковской картой. Она сложная. На ней нужно показать одновременно сведения по заказу и платёжную форму. Получается слишком много информации в одном месте, а это тяжело воспринимается.

Решили, что блок с данными заказа можно сворачивать под кнопку «О заказе». Если пользователю нужно посмотреть детализацию, он кликает кнопку, и блок разворачивается. По повторному клику блок можно свернуть обратно.

Я набрал в Гугле: js animate block height. Чтобы ознакомиться, так сказать, с best practices в этом впросе. Очень удивился, обнаружив, что выдачу Гугла теперь предваряют советы от ИИ. Возможно, это сделали уже давно, просто я не замечал.

С любопытством почитал, что предлагает нейросетка. Её предложение простое и напрашивается само собой. Высоту блока менять через Java Script. А анимацию сделать через свойство transition в CSS.

Отличное решение. Пользоваться им я, конечно, не буду. Ведь я не знаю заранее высоту блока. Заказ может быть длинным, а может быть коротким. Поэтому мне удобнее анимировать не просто высоту, а максимальную высоту.

Пусть в свёрнутом состоянии максимальная высота блока будет нулевой. Таким образом, он будет скрыт. А чтобы развернуть блок назначим ему высоту, которой заведомо хватит. Анимируем по прежнему через transition. Вот так:

.block {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;

  &_expanded {
    max-height: 300px;
  }
}

Чтобы развернуть блок нужно через JS назначить ему CSS-класс block_expanded. А чтобы свернуть — отнять этот класс.

Всё просто. Но есть и подводные камни. Если максимальную высоту сделать слишком большой, то анимация потеряет плавность. Поэтому подбирать её нужно с умом.

Собственно, задача простая. В контексте этой заметки мне больше интересно прониктовение ИИ в нашу жизнь. Теперь ещё и в выдаче Гугла. Будет особенно круто, если ИИ сам решил эту задачу. А не просто предложил самый частый выбор тех, кто гуглил до меня.

Хотя, по-настоящему хорошим решением было бы заранее подсчитать высоту блока. Потому что анимация через msx-height всё же получается дёрганная. Если бы ИИ предложил мне такую штуку, то это было бы хорошей помощью. Возможно, со временем научится.