Angular2 Pre-Bootstrap-Ladebildschirm (Begrüßungsbildschirm) mit Webpack

Wie kann ich einen Begrüßungsbildschirm implementieren, der z. B. nach Abschluss des Bootstrappings langsam ausgeblendet wird?Angular2 Pre-Bootstrap-Ladebildschirm (Begrüßungsbildschirm) mit Webpack

Ich lese this Tutorial (der zweite Ansatz), aber es ist für systemjs geschrieben.

und Zeit zu sparen, ich weiß schon, dieses:

.loading { 
    opacity: 0; 
    transition: opacity .8s ease-in-out; 
    position: fixed; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
     color: #fff; 
    background: #000; 
    z-index: -1; 
} 

my-app:empty + .loading { 
    opacity: 1; 
    z-index: 100; 
} 

my-app:empty + .loading h1 { 
    color: #EEE; 
    position: absolute; 
    top: 50%; 
    width: 100%; 
    text-align: center; 
    transform: translate(0, -50%); 
}

, die nicht sauber ist!

Quelle

2017-02-07 Ark

ich diese Anleitung befolgt haben: https://www.bennadel.com/blog/3105-creating-a-pre-bootstrap-loading-screen -in-angular-2-rc-1.htm –

@ FabrizioCaldarelli, Es ist das gleiche. kein Webpack: | – Ark

Ich benutze auch webpack, aber diese Anleitung fügt keine Konfiguration zu webpack hinzu (es ist alles innerhalb der index.html). –

Sie können das wirklich ziemlich leicht tun. Ich folgte dem Beispiel von bennadel's blog aber leicht modifiziert, so dass die html so etwas wie dieses:

<html> 
<head> 
    <style type="text/css"> 
     // CSS style with `transition` animation 
     // so that when you apply a class i.e. `.loaded { opacity: 0 }` 
     // it will smoothly fade out 
     // Also this needs to be with a z-index: 9999 so that it will 
     // show over `app-root`. 
    </style> 
</head> 
<body> 

    <app-root></app-root> 

    <div id="my-splash-screen"> 
     Loading animation or what ever... 
    </div> 

</body> 
</html>

Und dann im src Ordner der Angular 2+ App finden Sie die main.ts Datei. Zunächst wird der Inhalt der Datei wird der Standard wie:

import { enableProdMode } from '@angular/core'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 

import { AppModule } from './app/app.module'; 
import { environment } from './environments/environment'; 

if (environment.production) { 
    enableProdMode(); 
} 

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));

Der Schlüssel hier ist ein .then() vor dem .catch() Block im platformBrowserDynamic() Teil anhängen, die die Magie nicht mit der CSS-Klasse auf die my-splash-screen Anwendung, wartet einen kurzen Moment und entfernt dann den Splash. Mit anderen Worten, wird die Code etwas wie folgt aus:

platformBrowserDynamic().bootstrapModule(AppModule) 
.then(() => { 
    let splashScreen = document.getElementById('my-splash-screen'); 
    splashScreen.setAttribute('class', 'loaded'); 
    setTimeout(function(){ splashScreen.remove(); }, 1300); // change the timeout to be almost the same as the transition animation. 
}) 
.catch(err => console.log(err));

Quelle

2017-11-27 23:49:50 tftd

Angular2 Pre-Bootstrap-Ladebildschirm (Begrüßungsbildschirm) mit Webpack

Antwort

Verwandte Themen