サレハ?ムバシャール著??

最近まで、アニメーション化できる CSS プロパティの數(shù)は限られていました。たとえば、フェードインまたはフェードアウト効果を作成するには、display プロパティの代わりに opacity プロパティを使用するのが一般的です。これは後者はアニメーション化できないためです。ただし、問題は、要素が視覚的に非表示になっても、ページ上にはまだ存在していることです。

最近、Chrome にはこの問題を解決し、開発プロセスをはるかに簡素化する新機能が導(dǎo)入されました。この記事では、表示およびサイズのプロパティをアニメーション化する従來の方法と、これらの新機能を比較します。

アニメーション表示と要素サイズの問題

おそらく、ある時點で CSS を使用して要素にフェードイン/フェードアウト効果を作成する必要があったと思います。主な方法は、要素の不透明度にアニメーションまたはトランジションを適用することです。ただし、不透明度をゼロに設(shè)定しても、実際に要素が削除されるわけではありません。要素が非表示になるだけです。ほとんどの場合、それで十分です。

しかし、ユーザーが項目を削除できる To Do リストがあるとします。項目がフェードアウトするような終了アニメーションを作成したい場合は、通常は不透明度を使用します。ただし、リストの高さを調(diào)整する必要がある場合は、表示をなしに設(shè)定する必要もあります。ここでの問題は、項目が視覚的に消えても、依然として DOM 內(nèi)のスペースを占有し、レイアウトやユーザー操作などに支障をきたすことです。

ここでは 2 つのアプローチを並べて比較しています。1 つは不透明度のみを使用する方法、もう 1 つは不透明度と表示を組み合わせた方法です。以下の例を試して違いを確認してください:

CodePen で、Saleh-Mubashar (@saleh-mubashar) による Pen Simple Todo アプリの比較を參照してください。

表示と不透明度を組み合わせるとレイアウトがどのように変化するかに注目してください。一方、不透明度だけを使用するとリストに隙間が殘ります。 2 番目の方法 (不透明表示) はレイアウトの問題を解決しますが、フェードが終了する前に display: none が適用されるため、スムーズなフェードアウト効果が妨げられます。これにより、徐々に消えていくのではなく、突然消えてしまいます。

たとえば、opacity プロパティは 0 から 1 にスムーズに遷移できます。ただし、display プロパティには數(shù)値範囲がないためアニメーション化できません。その狀態(tài)は none、block、またはその他の値のようなバイナリです。中間の値がないため、CSS は表示をアニメーション化できません。

同様に、開発者は、height: auto などの要素の固有のサイズをアニメーション化しようとするときに、多くの場合課題に直面します。これは、アコーディオンなどの折りたたみ可能なセクションのトランジションによく使用されます。閉じたときの高さは 0px から始まり、開いたときにコンテンツに合わせて拡張されます。通常、高さなどのサイズ プロパティはアニメーション化できますが (數(shù)値の開始値と終了値があるため)、自動との間でアニメーション化すると問題が発生します。ブラウザは 0px と auto の間のステップを計算できません。したがって、複雑な回避策を使用する必要があります。

表示とサイズをアニメーション化するための従來のソリューション

表示と要素のサイズをアニメーション化する際の課題に対処する方法はいくつかあります。このセクションでは、CSS と JavaScript の両方を使用した最も一般的なソリューションについて説明します。

CSSベースのソリューション

CSS を使用して表示プロパティがアニメーション化できない問題を解決するには、いくつかの方法があります。最も信頼できる方法は、高さや幅などのサイズ プロパティとともに不透明度を使用することです。この場合、size プロパティを使用して、DOM から要素を効果的に削除します。これは、transition-delay プロパティを使用して実行できます?；镜膜?、サイズの遷移に遅延を追加します。これは、不透明度の遷移に設(shè)定された時間と同じです。要素がフェードアウトすると、そのサイズはすぐにゼロに設(shè)定され、display: none が適用されていたかのようにレイアウトから効果的に削除されます。

再び ToDo リストを例として使用すると、実裝は次のようになります。

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

ここでの秘訣は、不透明度が 0 にフェードアウトした後、遅延の後に高さとパディングを 0 に設(shè)定することです。遅延と不透明度の長さは同じである必要があります (この場合は 400ms)。高さ: 0 は、リスト項目がレイアウトと相互作用しないようにします。前に説明したように、高さはコンテンツに基づいて動的に自動調(diào)整されます。したがって、アニメーション化することはできません。したがって、アニメーションが適切に動作するには、要素の高さが特定の固定高であることを確認する必要があります。

可視性を非表示に設(shè)定することも、よく使用される方法です。ただし、これは DOM から要素を削除するわけではなく、通常どおりレイアウトに影響します。つまり、周囲の要素の位置に影響します。

要素をその固有サイズ (または高さ: 自動) にアニメーション化するための最も一般的な CSS ソリューションは、高さの代わりに max-height を使用することです。これは最もクリーンな実裝ではありませんが、仕事は完了します?；镜膜?、max-height は要素が取得できる値よりも大きな値に設(shè)定します。このようにして、固定高さをアニメーション化するのと同様に、スムーズな遷移を模倣します。

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.collapsible.open {
  max-height: 500px;
} 

このアプローチの最も明白な欠點は、最大高さを要素內(nèi)の実際のコンテンツよりも常に大きくする必要があることです。もう 1 つの問題は、コンテンツの高さが max-height 値と完全に一致しない限り、遷移のタイミングが不正確に感じられる可能性があることです。

コンテンツの高さは 400 ピクセルですが、最大高さを 1000 ピクセルに設(shè)定したとします。アニメーションは技術(shù)的には継続時間全體 (たとえば 2 秒間) 継続します。ただし、視覚的には、要素はコンテンツの実際の高さ (400 ピクセル) に達するとすぐに成長が止まりますが、最大高さは 1000 ピクセルに移行し続けます。したがって、この場合、移行期間は指定した期間よりも短くなります。

JavaScript メソッド

上記で説明した CSS ソリューションはすべて非常に複雑で、予測できない結(jié)果を招く可能性があります。最近まで、これを?qū)g現(xiàn)する最も信頼できる方法は JavaScript を使用することでした。

不透明度の遷移後に表示なしを適用するには、setInterval 関數(shù)または setTimeout 関數(shù)を使用して、不透明度の遷移時間に一致する遅延を追加します。この遅延の後、表示をなしに設(shè)定できます。以下に例を示します:

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

このコードでは、ボタンをクリックした後、要素が 1 秒かけてフェードアウトし、その後すぐに表示がなしに設(shè)定されます。つまり、要素はレイアウトから削除されます。

同様に、固有のサイズをアニメーション化するには、JavaScript で要素の高さを計算し、その値を高さのエンドポイントとして使用できます。このアプローチは、より信頼性が高く、正確です。ただし、依然として高さのプロパティでアニメーション化していることに注意してください。

ここでの明白な利點は、要素の実際のコンテンツに基づいて高さを動的に設(shè)定し、max-height を使用して推測するのではなく、トランジションが実際の高さと一致することを保証することです。

その方法は次のとおりです:

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.collapsible.open {
  max-height: 500px;
} 

この例では、高さ 0 で始まるセクションを展開しています。scrollHeight を使用してコンテンツの全高を取得し、それをトランジションのエンドポイントとして使用します。移行が完了したら、高さを自動に切り替えます。これにより、ブラウザーがコンテナーのコンテンツに基づいてコンテナーの高さを自動的に調(diào)整できるようになります。このステップはオプションですが、コンテナ內(nèi)のコンテンツが時間の経過とともに変化することが予想される場合に便利です。

表示と固有のサイズ プロパティをアニメーション化するための新しい CSS 機能

次に、最近ブラウザに導(dǎo)入された、またはブラウザに導(dǎo)入される予定の新しい CSS 機能を見てみましょう。これらの新しいツールは、以前に説明したシナリオで JavaScript の必要性を排除し、よりクリーンで短い CSS を作成するのに役立ちます。

表示とキーフレーム

@keyframes アットルールを使用すると、アニメーション シーケンスの中間ステップを制御してアニメーションを作成できます。最新の更新により、キーフレーム タイムライン內(nèi)で表示および [content-visibility](https://blog.logrocket.com/using-css-content-visibility-boost-rendering-performance/) プロパティをアニメーション化できるようになります。

表示なしとブロックの間を正確に補間しているわけではありません (それは不可能であるため)。代わりに、他のすべてのエフェクトが完了するのを待ってから、表示狀態(tài)を切り替えます。これは、JavaScript で行ったこと (display: none を適用する前に遷移が完了するのを待つこと) に似ていますが、CSS を使用するとはるかに簡単になります。

Chrome 開発者ブログには、物事を明確にする非常にクールなデモがあります。

CodePen 上の web.dev (@web-dot-dev) によるペン フェードアウト カード - アニメーションを參照してください。

まず、不透明度が 250ms かけて 0 に設(shè)定されます。このシーケンスが完了すると、表示はすぐに none に設(shè)定されます:

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

ここでの最大の利點は、最近まで CSS (または JavaScript) を使用して実裝するのが非常に困難であった、表示プロパティを含むより複雑なアニメーションを比較的簡単に作成できるようになったということです。

遷移動作により表示遷移が簡素化される仕組み

新しい [transition-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior) プロパティを使用して、トランジションでフェードアウト効果を作成することもできるようになりました。 。これにより、表示などの個別のアニメーション動作を持つプロパティにトランジションを適用できます。 allow-discrete を使用すると、表示プロパティをアニメーション化できます。簡単な例を次に示します:

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.collapsible.open {
  max-height: 500px;
} 

@starting-style を使用したエントリアニメーション

この記事では、フェードアウト効果についてかなり詳しく説明しました。しかし、逆の場合はどうでしょうか？エントリのアニメーションは扱いが難しく、多くの場合、JavaScript を介してのみ可能です。新しい @starting-style at-rule により、作業(yè)がはるかに簡単になります。

名前が示すように、これを使用すると、要素がページに表示される前にブラウザが検索できる要素にスタイルを適用できます。ここでエントリアニメーションの初期狀態(tài)を設(shè)定できます。要素がレンダリングされると、デフォルトの狀態(tài)に戻ります。

これが基本的な例です:

document.getElementById("fadeButton").addEventListener("click", function () {
  const element = document.getElementById("myElement");
  element.style.opacity = "0";
  setTimeout(() => {
    element.style.display = "none";
  }, 1000); // Match this value with the duration in CSS
});

DOM がロードされると、カードがフェードインします。 @starting-style はあらゆる種類のエントリ アニメーションに使用できます。 Chrome 開発チームによるもう 1 つの素晴らしい例を次に示します:

_CodePen の web.dev (@web-dot-dev) によるペン項目の遷移を參照してください。
_

calc-size() 関數(shù)を使用した固有のサイズのアニメーション化

calc() に似た calc-size 関數(shù)は、最近 Chrome 129 で導(dǎo)入されました。簡単に言えば、これを使用すると、固有のサイズに対して安全かつ確実に計算を?qū)g行できるようになります?，F(xiàn)在、auto、min-content、max-content、fit-content の 4 つのキーワードの操作がサポートされています。

これは、要素をその固有のサイズに、またはその元のサイズにアニメーション化する場合に特に便利です。 calc-size を使用すると、CSS で現(xiàn)在指定できる任意の高さをゼロまたは小さな固定値にアニメーション化できます。以下は、折りたたみ可能なセクションを height: 0 から auto:
まで展開する簡単な例です。

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

ブラウザの互換性

これらの機能のほとんどは主にアニメーションを強化するためのものであり、必須の DOM コンポーネントではありませんが、比較的新しいため、ブラウザーの互換性を確認する価値はあります。

• Chrome 116 および Opera 102 では、表示プロパティは @keyframe でアニメーション化可能です。 Firefox のサポートはまだ開発中であり、Safari はそれに取り組んでいます
• [transition-behavior](https://caniuse.com/mdn-css_properties_transition-behavior) プロパティは、Chrome 117 で最初にリリースされました?，F(xiàn)在開発中の Firefox を除くすべての主要ブラウザと互換性があります
• [@starting-style](https://caniuse.com/mdn-css_at-rules_starting-style) at-rule は Chrome 117 で導(dǎo)入されました。これは、Firefox 以外のすべての主要なブラウザで完全にサポートされています。ディスプレイからのアニメーションはまだサポートされていません: なし
• calc-size() は Chrome 129 で導(dǎo)入された最新機能で、現(xiàn)在 Chrome と Edge でのみサポートされています。ただし、他の主要なブラウザも間もなくサポートされる予定です

結(jié)論

この記事では、表示や要素のサイズなどの CSS プロパティをアニメーション化するときに開発者が直面する課題について検討しました。従來の方法では、直接アニメーション化できないプロパティのアニメーションを?qū)g現(xiàn)するには、CSS と JavaScript を使用した複雑な回避策が必要でした。

キーフレームを使用した表示のアニメーション化、calc-size() 関數(shù)、transition-behavior プロパティなどの新機能により、これらのアニメーションを簡単に実現(xiàn)できます。これらの関數(shù)により JavaScript が不要になり、よりシンプルな CSS アニメーションが可能になります。

---

フロントエンドがユーザーの CPU を占有していませんか?

Web フロントエンドがますます複雑になるにつれて、リソースを貪欲な機能がブラウザーに要求します。本番環(huán)境のすべてのユーザーのクライアント側(cè)の CPU 使用率、メモリ使用量などを監(jiān)視および追跡することに興味がある場合は、LogRocket を試してください。

LogRocket は Web アプリやモバイル アプリ用の DVR のようなもので、Web アプリ、モバイル アプリ、または Web サイトで発生するすべてを記録します。問題が発生する原因を推測する代わりに、主要なフロントエンド パフォーマンス メトリクスを集計してレポートし、アプリケーションの狀態(tài)とともにユーザー セッションを再生し、ネットワーク リクエストをログに記録し、すべてのエラーを自動的に明らかにすることができます。

Web アプリやモバイル アプリのデバッグ方法を最新化します。無料でモニタリングを始めましょう。

以上が表示プロパティとサイズプロパティを使用して CSS アニメーションを簡素化するの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。