Подтвердить что ты не робот

"Force Reflow" в переходах CSS в Bootstrap

Пересмотр загрузочного модального модуля jquery из загрузочного лотка Twitter Я вижу, что они используют переходы CSS для эффекта замирания.

Одна вещь, которая интригует меня из кода, - это строка:

that.$element[0].offsetWidth // force reflow

Если эта строка прокомментирована, переход не работает. Вся ссылка, которую я нашел о ее значении, заключается в том, что комментарий "принудительно оплатить".

Как чтение этого свойства может повлиять на переходы CSS? Это проблема с ошибкой в браузерах?

Ответ 1

Немного позднего ответа, но я решаю некоторые проблемы с переходами CSS, которые, как я думаю, относятся к этому фрагменту кода, который вы нашли, и, надеюсь, вам помогут в этом!

В принципе, я переключаю класс из Javascript/jQuery, который добавляет css-переходы в элемент dom. Затем CSS этого элемента обновляется, что приводит к возникновению перехода. Ниже приведена упрощенная версия кода:

var myelement = $("myselector");

// Set z-indexes before the transition
myelement.css("z-index", 1); 

var reflow = root.offset().left; // Re-flow the page

// Set the transition class on the element which will animate
myelement.addClass("trans");
myelement.css("width", 0 + "px"); // Animate to nothing

Итак, если я раскомментирую свою линию повторного потока, мой переход произойдет, но иногда (чаще всего это происходит в сафари), z-index myelement не будет обновлен.

Мне кажется, что в определенных ситуациях стили, записанные в dom, где-то буферизуются и не очищаются.

То, где приходит вызов левого смещения. Это одно из свойств, которые, как говорят, вызывают повторный поток на странице. Очевидно, что это, как правило, плохой показатель производительности, но кажется необходимым предотвратить переходы css, набирающие неправильные значения.

Там интересна ошибка Mozilla, в которой обсуждается тот же вопрос. Может быть интересен. Они предлагают добавить API для правильного запуска переходов из кода.

Это также интересная публикация SO о принудительном потоке.

Надеюсь, это поможет!:)