Question

在安装pace.js with eager.io时，我能够隐藏所有内容，直到页面加载为止。

然而，当使用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“隐藏除PACE之外的所有内容，直到页面完全加载”本地副本

2 个答案: