CSSアニメーションはシンプルで使いやすいですが、複雑なシーンは非常に挑戦的です。たとえば、マウスがホバリングしているときにボタンの背景色を変更しますか？単純。しかし、アニメーション高性能の方法での要素の位置とサイズは、他の要素の位置に影響しますか？厳しい！この記事では、この問題について詳しく説明します。
一般的な例は、アイテムをたくさん削除することです。上部に積み重ねられたアイテムは、スタックの下部から削除されたアイテムのギャップを補うために下に移動する必要があります。これは実生活で機能する方法であり、ユーザーはこの現実的な動きをウェブサイトで期待するかもしれません。そうでない場合、ユーザーは混乱したり、一時的に失われたりする可能性があります。人生の経験に基づいて、何かが特定の方法で働き、完全に異なる結果を得ることを期待しており、ユーザーはこの非現実的な動きに対処するために余分な時間が必要になる場合があります。
アイテムを追加する（ボタンをクリックする）またはアイテムの削除（プロジェクトをクリックする）のためのUIを次に示します。
「フェードアウト」アニメーションなどを追加することで、悪いUIをわずかにマスクすることができますが、リストが突然崩壊し、同じ認知的問題を引き起こすため、結果は大きくありません。
CSSのみのアニメーションを動的なDOMイベントに適用する（新しい要素を追加して要素を完全に削除する）ことは非常に難しいです。この問題に直接直面し、この問題に対処するために3つの異なるアニメーションタイプを導入します。これらはすべて、ユーザーがプロジェクトリストの変更を理解できるようにするという目標を達成します。この記事を完了すると、これらのアニメーションを使用したり、これらの概念に基づいて独自のアニメーションを構築したりできます。
また、アクセシビリティを簡単にカバーし、粒状HTMLレイアウトをARIAプロパティと補助デバイスとの互換性を保持する方法も説明します。
非常にモダンなアプローチ（そして私の個人的なお気に入り）は、最終的に到着する場所に応じて、垂直に消えて出入りすることです。これはまた、リストを「オープン」する必要があることを意味します。要素がリストを離れる場合、それが占有するスペースは縮小する必要があります。
同時に多くの異なる操作を行うため、各.list-item適切に指定された.list-containerコンテナクラスにラップするには、DOM構造を変更する必要があります。これは、アニメーションを機能させるために非常に重要です。
今、このスタイルは非正統的です。アニメーション効果が後で機能するためには、いくつかの慣用的なCSSプラクティスを犠牲にして行われる非常に具体的な方法でリストをスタイリングする必要があるためです。
.list {
リストスタイル：なし;
}
.list-container {
カーソル：ポインター;
フォントサイズ：3.5rem;
高さ：0;
リストスタイル：なし;
位置：相対;
テキストアライグ：センター;
幅：300px;
}
.list-container：not（：first-child）{
マージントップ：10px;
}
.list-container .list-item {
バックグラウンドカラー：＃D3D3D3;
左：0;
パディング：2REM 0;
位置：絶対;
上：0;
遷移：0.6sすべての断点。
幅：100％;
}
.add-btn {
背景色：透明;
ボーダー：1pxソリッドブラック。
カーソル：ポインター;
フォントサイズ：2.5rem;
マージントップ：10px;
パディング：2REM 0;
テキストアライグ：センター;
幅：300px;
}まず、 margin-topを使用して、スタック内の要素間に垂直空間を作成します。下部にマージンはありません。そのため、他のリスト項目が削除されたリスト項目によって作成されたギャップを埋めることができます。これにより、コンテナの高さをゼロに設定しても、下部にマージンがあります。余分なスペースは、削除されたリスト項目のすぐ下のリスト項目の間に作成されます。また、削除されたリスト項目のコンテナの高さに応じて、同じリスト項目を上に移動する必要があります。また、この余分なスペースがリストアイテム間の垂直ギャップをさらに拡大するため、 margin-topを使用してこれが発生しないようにします。
ただし、問題のプロジェクトコンテナがリストの最初の項目ではない場合にのみこれを行います。これが私たちが:not(:first-child)する理由です。これは、最初のリスト項目がリストの上端から押し下げられたくないので、これを行います。その後、すべてのアイテムでこれを行うことを望んでいます。なぜなら、それらは別のリスト項目のすぐ下にあり、最初のリスト項目はそうではないからです。
現在、これは完全に意味がある可能性は低いです。現在、要素の高さをゼロに設定していないからです。しかし、これは後でこれを行います。リスト要素間の垂直間隔を正しくするために、私たちがしたようにマージンを設定する必要があります。
指摘する価値のあるもう1つのことは、 .list-item要素が親の.list-container .list-containerにネストされているという事実は、それらがabsolute位置を持つように設定されていることです。これを行い、削除時に。 .list-item要素を上方にフロートし、他の.list-item要素を移動し、この.list-item要素を削除して残ったギャップを埋めます。これが発生すると、 .list-container要素（絶対に配置されていないため、DOMの影響を受ける）は高さを崩壊させ、他の.list-container要素が位置を埋めることができますが、。 .list-item要素（絶対的な方法にあります）は上向きに浮かびますが、DOMによって影響を受けないため、リストの構造には影響しません。
残念ながら、個々のリストアイテムが1つずつ積み重ねられる適切なリストを取得するのに十分なことをしていません。代わりに、現時点で見ることができるのは.list-itemで、同じ位置に積み上げられたすべてのリスト項目を表します。これは、 .list-item要素はpadding属性を介して特定の高さを持っている可能性があるが、親要素はゼロの高さではないためです。これは.list-container DOMに実際にこれらの要素を互いに分離するものは何もないことを意味します。これを行うには、子どもの要素とは異なり、DOMの影響を受けるため、特定の高さを持つ必要があるためです。
リストコンテナが子供の要素の高さを正確に一致させるには、JavaScriptを使用する必要があります。したがって、すべてのリスト項目を1つの変数に保存します。次に、スクリプトが読み込まれた直後に呼び出される関数を作成します。
これは、リストコンテナ要素の高さを処理する関数になります。
const listitems = document.queryselectorall（ '。リスト項目'）;
関数CalculateHeightofListContainer（）{
};
CalculateHeightofListContainer（）;最初に行うことは、リストから最初の.list-item要素を抽出することです。これらはすべて同じサイズであるため、これを行うことができます。そのため、どの要素を使用するかは関係ありません。アクセスすると、要素のclientHeightプロパティを介して高さをピクセルに保存します。その後、新しいものを作成します