Question

我的元素有transition: transform .5s

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

所以我想要实现的是，最初，元素位于左侧。 ~~在窗口onload，~~当渲染元素时，我删除了变换类，浏览器会将元素设置为动画回到正确的位置。

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

我试过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

Answer 2

您应该使用javascript的DOM Content Loaded事件

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

只有当您的浏览器完全加载并解析整个内容时，才会触发此操作。

Answer 3

不要认为这是一个答案，因为我相信你可以找到更优雅的东西，但这可能会给你一些想法。

将此添加到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

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

3 个答案: