pace.js "Nasconde tutto tranne PACE fino a quando la pagina non è stata caricata completamente" copia locale

Question

Sono riuscito a nascondere tutto tranne il ritmo finché la pagina non si è caricata durante l'installazione di pace.js with eager.io.

Tuttavia, quando si utilizzava bower per installare il plug-in e scaricare il tema css, non ero in grado di capire come farlo.

Answer 1

Ho fissato questo aggiungendo questo 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

La risposta precedente funziona nella maggior parte dei casi, ma se per qualsiasi pace.js ragione è disattivato, il vostro corpo a mantenere la sua opacità a 0 e il contenuto non viene essere mostrato. Le seguenti regole evitare questo problema:

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

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

Quindi, a voi di aggiungere prefissi o pseudo-classi ...