angular animated ghost elements

Elemen Hantu Animasi dalam Angular

Terkadang disebut sebagai 'kerangka', elemen hantu adalah representasi kotak abu-abu dari UI tertunda yang akan tersedia di masa mendatang; setelah data async dimuat atau mungkin modul yang dimuat dengan lambat sudah siap.

Elemen hantu sangat berguna untuk implementasi tabel kompleks dan UX lainnya di mana pemuatan data tidak sepele.

Meskipun banyak aplikasi [terutama Slack dan Facebook] menggabungkan UX dengan kerangka dan CSS, komunitas pengembang Angular belum membahas teknik ini secara mendetail.

---

Blog di Angular-in-Depth

Demo PWA yang dihosting

https://angular-animated-ghost-list.firebaseapp.com/

---

Pendekatan

Tampilan hantu dapat digunakan dalam tiga (3) cara:

1. Pisahkan, overlay berbeda dari elemen DOM yang digunakan sebagai pengganti elemen 'nyata' (DOM)
2. Elemen sebaris yang menampilkan data hantu atau data 'nyata'
3. Hantu sebaris dengan pembungkus AsyncItem

Untuk daftar atau tabel, elemen hantu bisa jadi sangat menantang untuk diterapkan.

Keuntungan dari (1) adalah pengembang memiliki kekuatan maksimal untuk menganimasikan elemen hantu dan elemen nyata secara bersamaan. Khususnya untuk daftar, di mana pengembang mungkin ingin mengubah item menjadi :enter atau :leave .

Repositori ini mendemonstrasikan ide tentang cara mempartisi, mengimplementasikan, dan menganimasikan elemen hantu ... diimplementasikan dengan Angular 7.x dan @angular/animations .

---

Demo StackBlitz

1.) Hamparan Hantu Animasi

2.) Animasi Hantu Inline

3.) Hantu Animasi + AsyncItem

---

Sumber Belajar

• https://www.viget.com/articles/a-bone-to-pick-with-skeleton-screens/
• https://codepen.io/NickNoordijk/pen/VLvxLE
• https://css-tricks.com/building-skeleton-screens-css-custom-properties/
• https://blog.ionicframework.com/improved-perceived-kinerja-dengan-skeleton-screens/
  • https://github.com/ionic-team/ionic/tree/master/core/src/components/skeleton-text
• https://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html