javascript - 为什么这不是 :after element working?

Question

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

http://www.samnorris.net/portfolio-ss/

如果我将它的 CSS 放入 #windowloader 中，动画就会工作，但是因为我需要它位于纯色背景之上(以隐藏未加载的内容...)我想将它放入一个 :after 伪类中以将它加载到 #windowloader div 的顶部...但由于某种原因，这不起作用。

是我的 CSS 不正确，还是其他原因...？

这是显示应该显示的动画的 Codepen: http://codepen.io/devilishalchemist/pen/emOVYQ

HTML:

<div id="windowloader">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

我页面中的相关 CSS:

/* ==========================================================================
  PAGE LOADER
========================================================================== */


.nonscroll {
  overflow: hidden;
}


#windowloader {
  overflow: auto;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999998;
  display: table;
  background: $black;
}

#windowloader {

  &:after {

  content: '';
  display: block;
  position: absolute;
  z-index: 999999;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
  animation: loader 1.2s infinite ease-in-out;

  span {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    background-color: #EE4040;
    animation: loaderBlock 1.2s infinite ease-in-out both;

    &:nth-child(1) {
      top: 0;
      left: 0;
    }
    &:nth-child(2) {
      top: 0;
      right: 0;
      animation: loaderBlockInverse 1.2s infinite ease-in-out both;
    }
    &:nth-child(3) {
      bottom: 0;
      left: 0;
      animation: loaderBlockInverse 1.2s infinite ease-in-out both;
    }
    &:nth-child(4) {
      bottom: 0;
      right: 0;
    }
  }

  /*LOAD FINISH*/
  .loaded {
    top: -100%;
  }

 }
}

   @keyframes loader {
      0%, 10%, 100% {
        width: 80px;
        height: 80px;
      }
      65% {
        width: 150px;
        height: 150px;
      }
    }
    @keyframes loaderBlock {
      0%, 30% {
        transform: rotate(0);
      }
      55% {
        background-color: #F37272;
      }
      100% {
        transform: rotate(90deg);

      }
    }
    @keyframes loaderBlockInverse {
      0%, 20% {
        transform: rotate(0);
      }
      55% {
        background-color: #F37272;
      }
      100% {
        transform: rotate(-90deg);
      }
    }

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');
});

Answer 1

呸，没关系 - 我只是将动画放在 #windowloader div 中的一个单独的 div 中，我想这可能效果很好..