Question

如何实现启动画面，例如，在引导完成后缓慢淡出。

我正在阅读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%);
}

那不干净！

Answer 1

你可以很容易地做到这一点。我按照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>

然后在Angular 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));

此处的关键是在.then()部分的.catch()块之前添加platformBrowserDynamic()，这样可以将css类应用于my-splash-screen，等待一会儿，然后移除飞溅。换句话说，代码将变为这样：

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

使用Webpack的Angular2预启动加载屏幕（启动画面）

1 个答案: