CSS3 Lade Animation Komponente in Angular 2

Question

Ich beginne zu lernen, wie tun, Animationen mit CSS3, hier ist meine erste animation.

Ich habe es zwischen meinem <root> Tag in meiner Angular4 Anwendung platziert und es funktioniert!

Aber ich möchte es in eine eckige Komponente für die Wiederverwendung verpacken, kann das erreicht werden? Wie kann eine Ladekomponente vor allem geladen werden, um ... eine Ladeanimation anzuzeigen?

Answer 1

Ich gehe davon aus, dass Sie dies beim Laden einiger asynchroner Daten anzeigen möchten. In diesem Fall können Sie Ihr HTML/CSS einfach zu einer Komponente hinzufügen und deren Sichtbarkeit mit einer Eingabevariablen steuern.

In diesem Beispiel wird es standardmäßig angezeigt, dann können Sie es ausblenden, nachdem Ihre Daten aufgelöst sind.

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() { } 


} 

In Ihrem spinner.component.html

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

Dann können Sie die Spinner von jeder Elternkomponente durch eine Boolesche Variable vorbei, die Sie auf true gesetzt ein- oder ausblenden, nachdem die Daten geladen wird.

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

Hier ist ein Artikel über ein spinner component für asynchrone Daten von Firebase verwenden, würde aber mit jedem Datenstrom gleiche Arbeit.

einen Spinner Zeige Bevor die App an diesem Punkt geladen ist haben

Ihre App keinen Zugriff auf seine Komponenten, so dass ich denke, dass es am besten ist klar CSS zu verwenden. Fügen Sie in index.html ein div mit einer Ladeklasse hinzu.

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

Dann in Ihrem Haupt-Stylesheet können Sie die Pseudo-:empty Selektor verwenden Sie den Laden des Inhalts, wenn die app-root leer zu zeigen.

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