CSSグリッドは、自動高さの遷移を行うことができます

CSSのヒント！ネルソン・メネゼスは、新しいアプローチ（現在はFirefoxでのみ機能している）を発見しましたが、これは非常に賢いです。

CSSは自動サイズにアニメーション化できないことを知っているかもしれませんが、これは非常に残念です。ゼロアニメーションから「需要サイズ」まで、多くの場合非常に役立ちます。利用可能なテクノロジーを文書化しました。彼らは次のように要約します：

• max-height必要とするよりも大きな値にアニメーション化するため、時間が不正確で滑らかではなくなります。
• JavaScriptを使用して最終サイズを測定し、それをアニメーション化します。つまり、JavaScriptを使用します。

ネルソンのテクノロジーは、これらの技術でも、視覚的な不器用さを持つある種の変換ベースのアプローチでもありません。このテクノロジーコアはCSSグリッドを使用しています...

 .Expander {
  ディスプレイ：グリッド;
  Grid-Template-rows：0fr;
  トランジション：グリッドテンプレート列1秒。
}

.expander.expanded {
  Grid-Template-rows：1fr;
}

信じられないほど、Firefoxでは、この領域内のコンテンツ間で0からコンテンツの自然な高さに移行します。アクセシビリティを維持しながら、オーバーフローや可視性を隠すように少し余分な作業をして、それを正しく見えるようにします。

これは素晴らしいです。この問題に注意を向けましょう。Chromeもそれを採用するかもしれません。しかし、もちろん、自動高さの遷移が機能し始めた方が良いでしょう。これが完全に不可能であるとは想像できません。

以上がCSSグリッドは、自動高さの遷移を行うことができますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。