Для плавного скрытия блока с анимацией высоты, не стоит использовать
Использование
jQuery, хоть и может упростить некоторые задачи, является дополнительной зависимостью, от которой в новых проектах, вероятно, стоит отказаться. Вместо этого можно использовать более нативные решения. Не стоит заменять универсальные решения костылями, потому как браузеры могут не давать 100% управления
setTimeout для добавления display:none. Вместо этого можно анимировать display совместно с height, используя transition и allow-discrete. Это позволит избежать проблем с определением времени анимации и обеспечит более чистый код. Для элементов управления, таких как кнопки, которые могут забирать фокус даже при нулевой высоте, важно анимировать display: none в конце анимации высоты, чтобы они не мешали взаимодействию с другими элементами. Изображение носит иллюстративный характер
Использование
transition: display совместно с allow-discrete – это относительно новый подход, который пока поддерживается не всеми браузерами (Chrome и Edge), но в скором времени должен стать общепринятым. В качестве альтернативы display: none можно использовать visibility: hidden с tabindex="-1", что предотвратит получение фокуса скрытыми элементами. Также, можно использовать keyframes и animation, а также свойство inert для элемента формы. jQuery, хоть и может упростить некоторые задачи, является дополнительной зависимостью, от которой в новых проектах, вероятно, стоит отказаться. Вместо этого можно использовать более нативные решения. Не стоит заменять универсальные решения костылями, потому как браузеры могут не давать 100% управления
tabbable через tab-index. Цепочечное преобразование DOM элементов может быть описано декларативным способом, что более наглядно и избегает проблем, связанных с переменными и циклами.
