Question

我的页面上有一个预加载器，它应该显示一个动画。

表示动画应该在页面加载之前显示在深黑色背景之上......但是动画没有显示。

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

如果我把它的CSS放到#windowloader中，动画就有效，但因为我需要它在一个坚实的背景之上（隐藏未加载的内容......）我想把它放到：伪类之后将它加载到#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中，这可能效果不错我猜...

为什么不这样：元素工作后？

1 个答案: