@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)
  • Вопрос задан
  • 125 просмотров
Решения вопроса 1
JRK_DV
@JRK_DV
Рецепты https://codepen.io/jrkdv/full/LKLXdq
предположение такое:

цитата из доки
Метод 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) Всегда ли он будет срабатывать?

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы