18

Я обнаружил, что некоторые свойства CSS (думаю, в первую очередь те, которые отвечают за позиционирование и отображение элементов) применяются с небольшой задержкой (часто способной поломать код).

В моём случае это свойство opacity при создании слайд-шоу. пример я максимально упростил, убрал классы и всё лишнее, чтобы минимизировать код.

Следующая функция делает чтобы элемент исчез (моментально), а затем появился (плавно).

function fadeIn() {
    var $el=$('div');
    $el.css('transition', '').css('opacity', '0').delay(13)
    .queue(function(next) {
        $(this).css('transition', 'all 2s').css('opacity', '1');
        next(); 
    });
}

Всё работает, но delay(13) выглядит как грязный хак (в хроме достаточно delay(0), но в Firefox нужно не меньше 13). А на более медленном ПК нужно будет задержку ещё больше ставить?

Думаю, что происходит следующее: при недостаточно большом delay применение opacity не успевает произойти - и тут же применяется transition (и на моментальном исчезновении можно ставить крест).

Существует ли какое-то красивое решение проблемы? чтобы выполнить определённый код только после того, как свойства CSS "по-настоящему" применятся к элементам?

2 ответа 2

8

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

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

Вот пример: https://jsfiddle.net/whpmhwzz/4/

~function () {
  var demo = document.getElementById("demo");

  document.getElementById("to-0").addEventListener("click", function() {
    demo.style.width = 0;
  });

  document.getElementById("to-100").addEventListener("click", function() {
    demo.style.width = "100%";
  });

  document.getElementById("try-force-to-0").addEventListener("click", function() {
    demo.style.transition = "none";
    demo.style.width = "0";
    demo.style.transition = ""; // IE fails to assign null
  });

  document.getElementById("force-to-0").addEventListener("click", function() {
    demo.style.transition = "none";
    demo.style.width = "0";
    getComputedStyle(demo).transition; // No recalculation in FF and IE
    demo.style.transition = "";
  });

  document.getElementById("force-to-0-again").addEventListener("click", function() {
    demo.style.transition = "none";
    demo.style.width = "0";
    getComputedStyle(demo).width;
    demo.style.transition = "";
  });

  document.getElementById("force-to-0-height").addEventListener("click", function() {
    demo.style.transition = "none";
    demo.style.width = "0";
    getComputedStyle(demo).height;
    demo.style.transition = "";
  });

  document.getElementById("force-to-0-fail").addEventListener("click", function() {
    demo.style.transition = "none";
    demo.style.width = "0";
    getComputedStyle(demo); // No recalculation
    demo.style.transition = "";
  });
}();
p {
  margin-top: 60px;
}
div {
  width: 100%;
  transition: width 3s linear;
  height: 2em;
  background: red;
}
<p>
  <button id=to-0>To 0</button>
  <button id=try-force-to-0>Try force to 0</button>
  <button id=force-to-0>Force to 0</button>
  <button id=force-to-0-again>Force to 0 again</button>
  <button id=force-to-0-height>Force to 0 once more</button>
  <button id=force-to-0-fail>Force to 0 fail</button>
  <button id=to-100>To 100</button>
</p>
<div id=demo></div>

3
  • 1
    Пара уточнений: getComputedStyle(demo).transition; // No recalculation in FF and IE не работает, потому что transition - это shorthand property. getComputedStyle().color уже будет работать. Получать width/height даже немного хуже: stackoverflow.com/a/31862081/1026 PS. Про ~function(){}() не знал, прикольно.
    – Nickolay
    6 авг 2015 в 18:06
  • @VenZell, пробел после унарного оператора? о_О
    – Qwertiy
    23 сен 2015 в 9:52
  • @Qwertiy это автоматическое форматирование... Я тут ни при чем. :) Я только добавил свойство margin-top для p
    – VenZell
    23 сен 2015 в 9:55
2

Вы немножко не правильно поняли. Задержка отрисовки страницы происходит из-за тега script, то есть из-за javascript. Браузер, дойдя до такого тега, останавливает отрисовку DOM и ждёт полной загрузки js-файла. Именно поэтому правильным тоном является конкатенировать js-файлы в один и размещать тег script в самом конце body. Полная загрузка и отрисовка страницы (картинки, css и т.д.) происходит после события load, а не ready:

$(window).load(function() {
   alert("window is loaded");
});
2
  • Вроде все и правильно, но не по теме вопроса.
    – Nickolay
    6 авг 2015 в 16:37
  • @Nickolay быть может я не так понял, на скорую руку прочитав :)
    – SlyDeath
    7 авг 2015 в 5:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.