pace.js “Hide everything but PACE until the page has fully loaded” local copy

问题

I was able to hide everything but pace until the page had loaded when installing pace.js with eager.io.

However, when using bower to install the plugin and downloading the css theme, I was unable to figure out how to do this.

回答1:

I fixed this by adding this css

body > :not(.pace),body:before,body:after {
  -webkit-transition:opacity .4s ease-in-out;
  -moz-transition:opacity .4s ease-in-out;
  -o-transition:opacity .4s ease-in-out;
  -ms-transition:opacity .4s ease-in-out;
  transition:opacity .4s ease-in-out
}

body:not(.pace-done) > :not(.pace),body:not(.pace-done):before,body:not(.pace-done):after {
  opacity:0
}

回答2:

The previous answer works in most cases but if for any reason pace.js is disabled, your body will keep its opacity to 0 and your content won't be shown. The following rules avoid this problem:

.pace-running > :not(.pace) {
  opacity: 0;
}

.pace-done > :not(.pace) {
  opacity: 1;
  transition: opacity .5s ease;
}

Then, up to you to add prefixes or pseudo-classes…

来源：https://stackoverflow.com/questions/28599741/pace-js-hide-everything-but-pace-until-the-page-has-fully-loaded-local-copy