pace.js "Hide everything but PACE until the page has fully loaded" 本地副本

Question

时，我能够隐藏除 pace 之外的所有内容，直到页面加载完毕

但是，在使用 bower 安装插件和下载 css 主题时，我不知道该怎么做。

Answer 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
}

Answer 2

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

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

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

然后，就看你加前缀还是伪类…

pace.js "Hide everything but PACE until the page has fully loaded" 本地副本

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

css

pace.js