Webpackを使用したAngular2プレブートストラップローディング画面（スプラッシュ画面）

たとえば、ブートストラップが完了してからゆっくりとフェードアウトするスプラッシュ画面を実装するにはどうすればいいですか？Webpackを使用したAngular2プレブートストラップローディング画面（スプラッシュ画面）

私はthisチュートリアル（第2のアプローチ）を読んでいますが、systemjsのために書かれています。

と時間を節約するために、私はすでに、この1知っている：きれいではありません

.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%); 
}

を！

出典

2017-02-07 Ark

：https://www.bennadel.com/blog/3105-creating-a-pre-bootstrap-loading-screen言い換えれば、コードはこのようなものになるだろう-in-angular-2-rc-1.htm –

@FabrizioCaldarelli、それは同じです。ウェブパックなし：| – Ark

私はwebpackも使用していますが、そのガイドはwebpackに設定を追加しません（すべてindex.html内にあります）。 –

これは非常に簡単に実行できます。私はbennadel's blogの例を踏襲したが、HTMLはこのようなものになるように、わずかにそれを修正：

<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>

そして角度のsrcフォルダ内2+アプリあなたはmain.tsファイルを見つけます。最初はファイルの内容は、以下のようなデフォルトになります。ここで重要なのはmy-splash-screenにCSSクラスを適用して魔法を行いplatformBrowserDynamic()部分に.catch()ブロックの前.then()が付加され

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));

、しばらく待ってからスプラッシュを取り除きます。私は、このガイドに従ってきた

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));

出典

2017-11-27 23:49:50 tftd

Webpackを使用したAngular2プレブートストラップローディング画面（スプラッシュ画面）

答えて

関連する問題