javascript - 如何知道一个元素是否被渲染？

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