Мой элемент имеет transition: transform .5s
то он имеет отдельный класс: transform: translatex(-100%)
Так что я хотел бы достичь, так это то, что изначально элемент позиционируется влево. В окне onload, Когда элемент визуализируется, я удаляю класс преобразования, и браузер будет анимировать элемент обратно в правильное положение.
Но на самом деле происходит то, что когда страница становится видимой/визуализированной, элемент уже находится в правильном положении. и анимации нет.
Я пробовал setTimeout(function() {}, 0);
, он не работает. Если я setTimeout в течение 1 секунды, он работает, но иногда рендеринг занимает много времени, и я должен установить Timeout на 2 секунды. Но иногда он становится быстрым, а 2 секунды - долго ждать.
В целом, я считаю, что это не является надежным или правильным способом сделать это.
Как я могу достичь того, что хочу, правильный путь?
Изменить: Извините, ребята, попытавшись собрать демо, я понял, что не удаляю класс при загрузке окна. Это связано с тем, что мой элемент и его javascript и css загружены с помощью AJAX. Это может произойти до загрузки окна или после загрузки окна.
В любом случае, теперь мой вопрос: что, если окно займет много времени, чтобы загрузить? Возможно ли, что мой элемент будет отображаться до завершения загрузки окна? Или браузеры отображаются только тогда, когда все окно заканчивает загрузку?
Потому что я хочу как можно скорее анимировать элемент. Таким образом, безопасно ли ждать окна onload, в случае, когда окно занимает много времени для загрузки (изображения и медленное соединение и прочее)?
И если я загружу элемент с AJAX после загрузки окна, могу ли я сразу запустить анимацию, удалив преобразование? Или я должен определить, когда будет отображаться элемент?