angular animated ghost elements
1.0.0
Ghost-Elemente werden manchmal auch als „Skelette“ bezeichnet und sind Gray-Box-Darstellungen ausstehender Benutzeroberflächen, die in Zukunft verfügbar sein werden. Sobald asynchrone Daten geladen sind oder möglicherweise ein verzögert geladenes Modul bereit ist.
Ghost-Elemente sind sehr nützlich für Implementierungen komplexer Tabellen und anderer UX, bei denen das Laden von Daten nicht trivial ist.
Während viele Anwendungen (vor allem Slack und Facebook) UX mit Skeletten und CSS integrieren, muss die Angular-Entwicklergemeinschaft diese Technik noch im Detail diskutieren.
https://angular-animated-ghost-list.firebaseapp.com/
Ghost-Ansichten können auf drei (3) Arten verwendet werden:
Bei Listen oder Tabellen kann die Implementierung von Ghost-Elementen eine besondere Herausforderung darstellen.
Der Vorteil von (1) besteht darin, dass Entwickler maximale Möglichkeiten haben, die Geisterelemente und die realen Elemente gleichzeitig zu animieren. Insbesondere für Listen, bei denen Entwickler Elemente möglicherweise als :enter oder :leave gestaffeln möchten.
Dieses Repository zeigt Ideen zum Partitionieren, Implementieren und Animieren von Geisterelementen ... implementiert mit Angular 7.x und @angular/animations .
1.) Animierte Geister-Overlay
2.) Animierte Inline-Geister
3.) Animierte Geister + AsyncItem
