如何知道元素是否被渲染？

Question

我的元素有 transition: transform .5s

然后它有一个单独的类: transform: translatex(-100%)

所以我想要实现的是,最初,元素位于左侧. 在窗口上载,渲染元素时,我删除了变换类,浏览器会将元素设置为正确的位置.

但实际发生的是,当页面变得可见/渲染时,元素已经处于正确的位置.并且没有动画.

我试过setTimeout(function() {}, 0);它不起作用.如果我setTimeout 1秒,它可以工作,但有时渲染需要很长时间,我必须setTimeout 2秒.但有时它会变得很快,2秒钟需要等待很长时间.

总的来说,我觉得这不是一种可靠或正确的方法.

我怎样才能达到我想要的,正确的方法？

---

编辑:对不起家伙,在尝试组装演示后,我意识到我没有在窗口上卸载类.这是因为我的元素及其javascript和css都加载了AJAX.所以它可以在窗口加载之前或窗口加载之后发生.

无论如何,现在我的问题是,如果窗口需要很长时间才能加载怎么办？是否有可能在窗口加载之前渲染我的元素？或者浏览器仅在整个窗口完成加载时呈现？

因为我想尽快为元素制作动画.那么,在窗口需要很长时间才能加载(图像和连接缓慢,以及东西)的情况下,等待窗口加载是否安全？

如果我在窗口加载后用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