Javascript 为什么不是'；t：在元件工作之后？

我的页面上有一个预加载程序，它应该显示一个动画。动画应该在页面加载之前显示在黑色背景之上。。。但是动画没有显示

如果我把它的CSS放到#windowloader中，动画就可以工作，但是因为我需要它在坚实的背景上（隐藏卸载的内容…），我想把它放到：after伪类中，在#windowloader div上加载它。。。但出于某种原因，这是行不通的

是我的CSS不正确，还是其他什么

以下是代码笔，显示应显示的动画：

HTML:

FWIW，我也尝试过：

#windowloader:after { }

Javascript:

///////////////////////////////////////////////////////////////////////////
// Window Loader
///////////////////////////////////////////////////////////////////////////


$("#windowloader").transitioncss("transitionEndOpen","loaded",{duration:2000,delay:1000});

$("#windowloader").off("transitionEndOpen").on( "transitionEndOpen", function(){
    $("body").removeClass('nonscroll');
    $("#windowloader").remove();
    $("#portfoliogrid").isotope('layout');
    $("#isotopeMembers").isotope('layout');
    $(".isotopeBlog").isotope('layout');
});

---

呸，没关系-我只是把动画放在#windowloader div中的一个单独的div中，我想这可能已经足够好了

#windowloader:after { }

///////////////////////////////////////////////////////////////////////////
// Window Loader
///////////////////////////////////////////////////////////////////////////


$("#windowloader").transitioncss("transitionEndOpen","loaded",{duration:2000,delay:1000});

$("#windowloader").off("transitionEndOpen").on( "transitionEndOpen", function(){
    $("body").removeClass('nonscroll');
    $("#windowloader").remove();
    $("#portfoliogrid").isotope('layout');
    $("#isotopeMembers").isotope('layout');
    $(".isotopeBlog").isotope('layout');
});