Question

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

我已将其放在我的<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 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;
}

Angular 2中的CSS3加载动画组件

1 个答案: