pace.js "Ukryj wszystko, ale PACE, dopóki strona nie zostanie w pełni załadowana" kopia lokalna

Question

Udało mi się ukryć wszystko oprócz tempa, dopóki strona nie załadowała się podczas instalacji pace.js with eager.io.

Jednak przy użyciu altówki do zainstalowania wtyczki i pobierania motywu css, nie byłem w stanie dowiedzieć się, jak to zrobić.

Answer 1

Naprawiłem to dodając ten 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

poprzednią odpowiedź działa w większości przypadków, ale jeśli z jakichkolwiek pace.js powodem jest wyłączone, twoje ciało będzie utrzymać swoją przezroczystość 0 i zawartość nie będzie wykazać. Poniższe zasady uniknąć tego problemu:

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

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

Następnie, do ciebie należy dodać przedrostki lub pseudoklas ...