【问题标题】：How to ease out a loading screen in Angular?如何缓解 Angular 中的加载屏幕？
【发布时间】：2019-05-09 17:14:44
【问题描述】：

我在 Angular 中的 index.html 中创建了一个加载屏幕，例如：

<app-root>
    <div class="app-loading">
      <svg class="logo" viewBox="0 0 100 100" >

      </svg>
    </div>
</app-root>

并应用了一些样式。但是页面加载后，svg 就突然消失了。

<style type="text/css">
body, html {
  height: 100%;
}
.app-loading {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.app-loading .logo {
  height: 100px;
  width: 100px;
  transform-origin: center center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
</style>

当它消失时，我如何进行和缓出过渡？

【问题讨论】：

@dota2pro 我也添加了

标签： html css angular

【解决方案1】：

SVG 消失了，因为在应用程序引导后，index.html 中的 app-root 中定义的 HTML 被渲染的 app-root 组件替换。

要转换它，您可以将.app-loading 移到app-root 之外，然后按照您的意愿将其转换出您的引导应用程序。在下面的演示中，它只是绝对定位全屏。

您可以等待platformBrowserDynamic().bootstrapModule(...) 承诺完成以触发转换。

index.html

<div class="app-loading">
    ...
</div>

<app-root></app-root>

main.ts（或者你的应用被引导的地方）

// loading element container to transition
const loadingElement = document.querySelector(".app-loading");

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  // trigger the transition
  .then(() => loadingElement.classList.add("loaded"))
  // remove the loading element after the transition is complete to prevent swallowed clicks
  .then(() => setTimeout(() => loadingElement.remove(), 1000));

【讨论】：

太好了，奥斯汀。最好的解决方案。就我个人而言，我会将这里的逻辑保留在一个 .then 调用中，但我们将调用该偏好。谢谢。

【解决方案2】：

使用 CSS，为淡出设置动画

https://stackblitz.com/edit/angular-anim-fade-in-out

【讨论】：