Angular 2中的CSS3加载动画组件

Question

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

我已经将其放置<root>在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）来向任何父组件显示或隐藏微调器。

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

这是一篇有关使用Spinner组件处理Firebase异步数据的文章，但适用于任何数据流。

在应用加载之前显示微调框

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

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

然后，在主样式表中，:empty当应用程序根目录为空时，可以使用伪选择器显示加载内容。

.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;
}