Webpack을 사용한 Angular2 사전 부트 스트랩로드 스크린 (스플래시 스크린)

예를 들어, 부트 스트랩이 완료된 후 느리게 사라지는 스플래시 스크린을 어떻게 구현할 수 있습니까?Webpack을 사용한 Angular2 사전 부트 스트랩로드 스크린 (스플래시 스크린)

this 튜토리얼 (두 번째 방법)을 읽었지만 systemjs 용으로 작성되었습니다.

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

가 그리고 각 2+ 응용 프로그램의 src 폴더에 당신이 main.ts 파일을 찾을 수 있습니다. 처음에 파일의 내용과 같은 기본값이됩니다 :

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

여기서 핵심은 my-splash-screen에 CSS 클래스를 적용하여 마법을 수행하는 platformBrowserDynamic() 부분에 .then() 전에 .catch() 블록을 추가하는 것입니다, 잠시 기다린 다음 스플래시를 제거합니다. 나는이 가이드를 따라 한

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 사전 부트 스트랩로드 스크린 (스플래시 스크린)

답변

관련 문제