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

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

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

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

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

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

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

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

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

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

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

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

Ответ 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

Ответ 2

Вы должны использовать DOM Content Loaded событие javascript

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

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

Ответ 3

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

Добавьте это в javascript AJAXed in - обязательно оберните 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