Angular 2中的CSS3加载动画组件

Question

我开始学习如何使用 CSS3 制作动画，这是我的第一个 animation .

我已将它放在 Angular4 应用程序中的 标记之间，它可以工作!

但是我想把它打包成一个 Angular 组件以供重复使用，这可以实现吗？为了...显示加载动画，如何先加载加载组件？

Answer 1

我假设你想在加载一些异步数据时显示这个。在这种情况下，您只需将 HTML/CSS 添加到组件并使用输入变量控制其可见性。

在这个例子中，它会默认显示，然后你可以在你的数据被解析后隐藏它。

import { Component, Input } from '@angular/core';

@Component({
  selector: 'spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.scss']
})
export class ItemsListComponent {

  @Input() showSpinner: boolean = true;

  constructor() { }


}

在您的 spinner.component.html 中

<div *ngIf="showSpinner" class="lds-cube">
  <!-- the rest of your html -->
</div>

然后，您可以向任何父组件显示或隐藏微调器，方法是向其传递一个在加载数据后设置为 true 的 bool 变量。

<spinner [showSpinner]="yourBoolean"></spinner>

这是一篇关于使用 spinner component 的文章对于来自 Firebase 的异步数据，但适用于任何数据流。

在应用加载前显示微调器

此时您的应用将无法访问其组件，因此我认为最好使用纯 CSS。在 index.html 中添加一个带有加载类的 div。

<app-root></app-root>
<div class="loading">
  <h1>~$ loading app...</h1>
 <!-- your animation html -->
</div>

然后在您的主样式表中，您可以使用伪 :empty 选择器在 app-root 为空时显示加载内容。

.loading {
    opacity: 0;
    position: fixed;
    height: 100%;
    width: 100%;
    background: #272c33;
    padding-top: 25vh;
    text-align: center;
    z-index: -1;
    transition: opacity .8s ease-out;
}
app-root:empty + .loading {
  opacity: 1;
  z-index: 99999;
}