angular animated ghost elements
1.0.0
「スケルトン」とも呼ばれるゴースト要素は、将来利用可能になる保留中の UI をグレーボックスで表現したものです。非同期データがロードされるか、遅延ロードされたモジュールの準備が完了すると。
ゴースト要素は、データの読み込みが重要な複雑なテーブルやその他の UX の実装に非常に役立ちます。
多くのアプリケーション (特に Slack と Facebook) にはスケルトンと CSS を使用した UX が組み込まれていますが、Angular 開発者コミュニティではまだこの手法について詳しく議論されていません。
https://angular-animated-ghost-list.firebaseapp.com/
ゴースト ビューは 3 つの方法で使用できます。
リストやテーブルの場合、ゴースト要素の実装は特に困難になる可能性があります。
(1) の利点は、開発者がゴースト要素と実際の要素を同時にアニメーション化できる最大限の能力を発揮できることです。特にリストの場合は、開発者が:enterまたは:leaveとして項目をずらしたい場合があります。
このリポジトリは、Angular 7.x と@angular/animationsで実装されたゴースト要素を分割、実装、アニメーション化する方法に関するアイデアを示します。
1.) アニメーションゴーストオーバーレイ
2.) アニメーション化されたインライン ゴースト
3.) アニメーション化されたゴースト + AsyncItem
