Как узнать, отображается ли элемент?

Question

Мой элемент имеет transition: transform .5s

тогда имеет отдельный класс: transform: translatex(-100%)

Так что я хотел бы добиться того, что на начальном этапе, элемент позиционируется в левую сторону. В окне onload, Когда элемент визуализируется, я удаляю класс преобразования, и браузер будет анимировать элемент обратно в правильное положение.

Но на самом деле происходит то, что когда страница становится видимой/визуализированной, элемент уже находится в правильном положении. и нет анимации.

Я пробовал setTimeout(function() {}, 0); не работает. Если I setTimeout в течение 1 секунды, он работает, но иногда рендеринг занимает много времени, и я должен установить Timeout на 2 секунды. Но потом иногда он становится быстрым, а 2 секунды - долго ждать.

В целом, я считаю, что это ненадежный или правильный способ сделать это.

Как я могу достичь того, чего хочу, правильный путь?

---

Edit: Извините, ребята, после попытки собрать демо, я понял, что я не удалял класс у окна OnLoad. Это связано с тем, что мой элемент и его javascript и css загружены с помощью AJAX. Это может произойти до загрузки окна или после загрузки окна.

В любом случае, теперь мой вопрос: что, если окно занимает много времени, чтобы загрузить? Возможно ли, что мой элемент будет отображаться до завершения загрузки окна? Или браузеры отображаются только тогда, когда все окно заканчивает загрузку?

Потому что я хочу как можно скорее анимировать элемент. Таким образом, безопасно ли ждать окна onload, в случае, когда окно занимает много времени для загрузки (изображения и медленное соединение и прочее)?

И если я загружу элемент с помощью AJAX после загрузки окна, могу ли я сразу запустить анимацию, удалив преобразование? Или я должен определить, когда элемент визуализируется?

Answer 1

Вы можете попробовать использовать комбинацию DOMContentLoaded события и requestAnimationFrame. DOMContentLoaded срабатывает после того, как документ был полностью загружен и проанализирован, но до того, как все изображения и другие объекты на странице завершили загрузку. requestAnimationFrame задержит удаление класса до тех пор, пока страница не будет окрашена, поэтому элемент будет правильно переходить.

var box = document.getElementById('box'), 
    showBox = function(){ 
     box.classList.remove('offscreen'); 
    }; 
document.addEventListener("DOMContentLoaded", function(event) { 
    window.requestAnimationFrame(showBox); 
}); 

jsfiddle

Answer 2

Не считайте это ответом, поскольку я уверен, что вы можете найти что-то более элегантное, но это может дать вам некоторые идеи.

Добавьте к этому JavaScript AJAXed в - обязательно обернуть JavaScript в document.ready:

$(function(){ 
    var giveup = 0; //in case something goes wrong 
    var amirendered = 0; 
    while (amirendered==0){ 
     setTimeout(function(){ 
      if (element.length){ 
       amirendered = 1; 
       $('#myElement').addClass(doTransition); 
      } 
     },200); 
     giveup++; 
     if (giveup>200) amirendered++; //prevent endless loop 
    } 

}); //END document.ready 

Answer 3

Вы должны использовать DOM содержимое, загруженное событие JavaScript

document.addEventListener("DOMContentLoaded", function(event) { 
    console.log("DOM fully loaded and parsed"); 
    }); 

Это будет срабатывать только тогда, когда весь ваш контент будет загружен и полностью разобран в вашем браузере.