Время окончательного применения свойств CSS

#jquery #css #css3 #анимация #css_animation

Я обнаружил, что некоторые свойства 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 "по-настоящему" применятся к элементам?
    

Ответы

Ответ 1

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

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

Вот пример: 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;
}

  
  
  
  
  
  
  




Ответ 2

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

$(window).load(function() {
   alert("window is loaded");
});