在使用 eager.io 安装 pace.js时,我能够隐藏除了速度之外的所有内容,直到页面加载。
但是,当使用 bower 安装插件并下载 css 主题时,我无法弄清楚如何做到这一点。
在使用 eager.io 安装 pace.js时,我能够隐藏除了速度之外的所有内容,直到页面加载。
但是,当使用 bower 安装插件并下载 css 主题时,我无法弄清楚如何做到这一点。
我通过添加这个 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
}
前面的答案在大多数情况下都有效,但如果出于任何原因禁用了 pace.js,您的 body 将保持其不透明度为 0,并且您的内容将不会显示。以下规则可避免此问题:
.pace-running > :not(.pace) {
opacity: 0;
}
.pace-done > :not(.pace) {
opacity: 1;
transition: opacity .5s ease;
}
然后,由你来添加前缀或伪类……</p>