IE не обнаруживает встроенный стиль достаточно быстро - PullRequest
Новая
       8

IE не обнаруживает встроенный стиль достаточно быстро

2 голосов
/ 21 февраля 2020

Я создаю аккордеонный модуль в Elm с анимацией открытия / закрытия. Изначально тело аккордеона имеет атрибут style="height: 0". Открывая гармошку, я вычисляю высоту скрытого тела и применяю это, изменяя атрибут style="height: <contentheight>". Вот так я получаю переход CSS на работу.

После того, как тело аккордеона полностью раскрыто, я установил style="height: auto". Это делается с использованием setTimeout, которое соответствует времени transition-duration в CSS. Делая это, я позволяю телу аккордеона автоматически изменять размер, если его содержимое изменяется после его открытия.

Чтобы заставить работать переход CSS при закрытии аккордеона, я сначала заменяю auto на числовое значение c. Я вычисляю текущую высоту тела аккордеона и помещаю это в стиль height. Через 1 миллисекунду (используя setTimeout) я изменяю на height: 0.

Это прекрасно работает в Chrome, но в IE 11 и Edge происходит сбой в 80% случаев. Если я увеличу время ожидания до 50 мс, оно будет работать каждый раз, но, конечно, будет заметная задержка ввода. Если я использую Browser.Events.onAnimationFrame вместо тайм-аута 1 мс, он будет работать во всех трех браузерах, но, поскольку для этого требуется подписка в Elm, было бы неплохо, если бы был лучший способ.

Есть ли другие способы гарантировать, что IE и Edge обнаружат изменение атрибута, если оно присутствует только в течение 1 мс?

1 Ответ

3 голосов
/ 21 февраля 2020

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

В следующем примере использование преобразования в свойстве scaleY позволяет вам go с нуля к автоматической высоте. 

document.getElementById('accordion-button').addEventListener('click', () => {
  document.getElementById('accordion').classList.toggle('expanded');
});
#accordion {
  transform: scaleY(0); 
  transform-origin: top;
  transition: transform 300ms ease; // or however you want to handle this
}

#accordion.expanded {
  transform: scaleY(1); 
}
<button id="accordion-button">Click me</button>

<ul id="accordion">
  <li>Some content</li>
  <li>Some more</li>
</ul>

Таким образом, все будет обработано переходом CSS.

...