pace.js “隐藏除 PACE 之外的所有内容，直到页面完全加载”本地副本

【问题标题】：pace.js "Hide everything but PACE until the page has fully loaded" local copypace.js “隐藏除 PACE 之外的所有内容，直到页面完全加载”本地副本
【发布时间】：2015-02-19 06:13:32
【问题描述】：

在安装pace.js with eager.io 时，我可以隐藏所有内容，直到页面加载完毕。

但是，当我使用 bower 安装插件并下载 css 主题时，我无法弄清楚如何做到这一点。

【问题讨论】：

标签： css pace.js

【解决方案1】：

我通过添加这个 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
}

【讨论】：

查看 z-index

【解决方案2】：

上一个答案在大多数情况下都有效，但如果出于任何原因禁用了pace.js，您的正文将保持其不透明度为 0，并且您的内容将不会显示。以下规则避免了这个问题：

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

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

然后，由你来添加前缀或伪类……

【讨论】：

为什么需要上例中的伪类？