Как работает данный код?

Question

[wakenbyWork]

Пишу accordion на css + js используя transition: 200ms height linear. Изначально accordion открыт и его высота не указана через css, грубо говоря она auto. Но css не анимирует с auto to 0px. Нашел данный способ обхода:

function closeAccordion (accordion) {
  accordion.style.height = `${accordion.scrollHeight}px`
  window.getComputedStyle(accordion, null).getPropertyValue('height')
  accordion.style.height = '0'
}

Благодаря строчке

window.getComputedStyle(accordion, null).getPropertyValue('height')

все работает.

Я понимаю что такой код склеиться в один вызов style и transition не сработает:

accordion.style.height = `${accordion.scrollHeight}px`
accordion.style.height = '0'

Я так-же понимаю что getComputedStyle как-то разрывает эту склейку. И у меня вопрос больше не про то как это работает (хотя и это в том числе).

А про то:
1) Работает ли это во всех браузерах?
2) Всегда ли он будет срабатывать? Т.е не будет он рандомно работать и не работать. Т.е всегда ли будет срабатывать сначала установка высоты (

accordion.style.height = `${accordion.scrollHeight}px`

), а потом уже анимация до 0?
3) Нормальный ли это способ? Просто он мне напоминает setTimeout(() => {}, 0)

Answer 1

[ⓒⓢⓢ]

предположение такое:

цитата из доки

Метод Window.getComputedStyle() возвращает объект, содержащий значения всех CSS-свойств элемента, полученных после применения всех активных таблиц стилей, и завершения базовых вычислений значений, которые они могут содержать. Некоторые CSS-свойства доступны через API, предоставляемые объектом, или индексацию по именам CSS-свойств.

Предполагаю автор, вашего скрипта, при добавлении "getComputedStyle()" ориентировался на выделенную фразу из цитаты

function closeAccordion (accordion) {
  // ... <= до вызова функции высота "auto"
  accordion.style.height = `${accordion.scrollHeight}px` // Устанавливаем высоту
  window.getComputedStyle(accordion, null).getPropertyValue('height') // Провоцируем вычисление новых изменений
  accordion.style.height = '0' // Устанавливаем высоту
  // ... => после выхода из функции рендер видит, что высота была Npx, стала 0px => запускает анимацию
}

Без вызова "getComputedStyle()", соответственно:
до выполнения функции закрытия аккордиона высота была "auto"
после завершения функции высота стала "0"
для рендера высота изменяется из "auto" в "0" => анимация не выполняется

1) Работает ли это во всех браузерах?
2) Всегда ли он будет срабатывать?

нужно всегда проверять, во всех браузерах, неизвестные вам решения.
в данном случае, как по мне, безобидного ничего нет

Comments

[wakenbyWork]

Спасибо за развернутый ответ!