CSS トランジションが可視性で機能しないのはなぜですか?

CSS トランジションと可視性: プロパティの難題

CSS トランジションを使用する場合、特定のプロパティがスムーズにトランジションしているように見える状況に遭遇することがあります。一方、可視性などの他の機能には問題があることが判明しています。この動作を理解するために、遷移の性質を詳しく調べてみましょう。

遷移は、2 つの異なる値の間の遷移に依存します。不透明度などの数値を含むプロパティを使用すると、キーフレームの計算と値の間の補間が可能になります。ただし、可視性などのプロパティはバイナリ設定 (可視/非表示) で動作します。

可視性の場合、ブラウザは遷移時間をホバーアウト時の遅延として解釈します。これはバグではなく、非表示状態と表示状態の間を補間できないことの結果です。遅延トランジション効果は、ブラウザが表示状態を突然切り替える前に持続時間が終了するまで待機するために発生します。

対照的に、不透明度トランジションは、プロパティの数値によりスムーズな補間が可能であるため、期待どおりに機能します。不透明度の値は 0 から 1 に徐々に移行し、滑らかなフェード効果を作成します。

可視性プロパティをアニメーション化するには、不透明度またはその他の移行可能な測定プロパティ (高さ、幅など) を可視性のプロキシとして使用することを検討してください。たとえば、高さのトランジションを使用して、「非表示」状態の場合は高さを 0 に設定し、「表示」状態の場合は 0 以外の値を設定できます。

以上がCSS トランジションが可視性で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。