html - 如何缓解 Angular 中的加载屏幕？

Question

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

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

标签： htmlcssangular

Answer 1

SVG 消失了，因为在应用程序引导之后app-root，您在其中定义的 HTMLindex.html被呈现的组件替换。app-root

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

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

索引.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));