pace.js "Verstecken Sie alles außer PACE, bis die Seite voll geladen ist" lokale Kopie

Question

Ich konnte alles außer Tempo verstecken, bis die Seite geladen wurde, wenn Sie pace.js with eager.io installieren.

Allerdings, wenn Bower verwendet, um das Plugin zu installieren und das CSS-Thema herunterladen, konnte ich nicht herausfinden, wie dies zu tun ist.

Answer 1

Ich reparierte diese durch diese CSS Hinzufügen

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

Die bisherige Antwort funktioniert in den meisten Fällen aber wenn aus irgendeinem Grund pace.js deaktiviert ist, wird Ihr Körper seine Undurchsichtigkeit halten auf 0 gesetzt und der Inhalt wird nicht gezeigt werden. Die folgenden Regeln vermeiden Sie dieses Problem:

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

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

Dann an Ihnen Präfixe oder Pseudo-Klassen hinzuzufügen ...