Как облегчить загрузку экрана в Angular?

Question

Я создал загрузочный экран в index.html в Angular, например:

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

Как я могу сделать и смягчить переход, когда он исчезает?

Answer 1

SVG исчезает, поскольку HTML-код, определенный в app-root в вашем index.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));

Answer 2

Используя CSS, анимируйте затухание

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