หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

องค์ประกอบผีเคลื่อนไหวในเชิงมุม

ภาพ

บางครั้งเรียกว่า 'โครงกระดูก' องค์ประกอบผีคือการแสดงกล่องสีเทาของ UI ที่รอดำเนินการซึ่งจะพร้อมใช้งานในอนาคต เมื่อโหลดข้อมูล async หรือบางทีโมดูลที่โหลดแบบขี้เกียจก็พร้อม

องค์ประกอบ Ghost มีประโยชน์มากสำหรับการใช้งานตารางที่ซับซ้อนและ UX อื่นๆ ที่การโหลดข้อมูลไม่ใช่เรื่องเล็กน้อย

แม้ว่าแอปพลิเคชั่นจำนวนมาก (โดยเฉพาะอย่างยิ่ง Slack และ Facebook) จะรวม UX เข้ากับโครงกระดูกและ CSS แต่ชุมชนนักพัฒนา Angular ยังไม่ได้หารือเกี่ยวกับเทคนิคนี้ในรายละเอียดใด ๆ

บล็อกที่เชิงลึกเชิงลึก

ภาพ

เป็นเจ้าภาพการสาธิต PWA

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

แนวทาง

มุมมองโกสต์สามารถใช้ได้สาม (3) วิธี:

  1. แยกการซ้อนทับที่ชัดเจนขององค์ประกอบ DOM ที่ใช้แทนองค์ประกอบ 'ของจริง' (DOM)
  2. องค์ประกอบอินไลน์ที่แสดงข้อมูลโกสต์หรือข้อมูล 'จริง'
  3. Inline Ghosts พร้อมตัวห่อ AsyncItem

สำหรับรายการหรือตาราง องค์ประกอบ ghost อาจเป็นเรื่องยากอย่างยิ่งที่จะนำไปใช้

ข้อดีของข้อ (1) คือ นักพัฒนามีพลังสูงสุดในการสร้างภาพเคลื่อนไหวองค์ประกอบผีและองค์ประกอบจริงพร้อมกัน โดยเฉพาะอย่างยิ่งสำหรับรายการที่นักพัฒนาอาจต้องการสลับรายการเป็น :enter หรือ :leave

พื้นที่เก็บข้อมูลนี้สาธิตแนวคิดเกี่ยวกับวิธีการแบ่งพาร์ติชัน นำไปใช้ และทำให้ องค์ประกอบผี เคลื่อนไหว ... นำไปใช้กับ Angular 7.x และ @angular/animations

การสาธิต StackBlitz

1.) ภาพซ้อนทับผีแบบเคลื่อนไหว

ภาพ


2.) ผีแบบอินไลน์แบบเคลื่อนไหว

ภาพ


3.) ผีแบบเคลื่อนไหว + AsyncItem

ภาพ

แหล่งเรียนรู้

  • 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-Performance-with-skeleton-screens/
    • https://github.com/ionic-team/ionic/tree/master/core/src/components/skeleton-text
  • https://cloudcannon.com/destructions/2014/11/15/facebook-content-placeholder-destruction.html
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด