CSS トランジションが Visibility プロパティで機能しないのはなぜですか?

CSS トランジションと可視性: 欺瞞的な錯覚

CSS では、トランジションによりプロパティの状態間のスムーズなアニメーションが可能になります。ただし、可視性を移行しようとすると不可解な問題が発生し、ユーザーは当惑し、バグではないかと疑うことになります。

可視性移行のケース

次のコードを考えてみましょう。

<code class="css">#inner {
    visibility: hidden;
    transition: visibility 1000ms;
}

#outer:hover #inner {
    visibility: visible;
}</code>

このコードは、ID が「outer」の要素の上にマウスを移動すると、ID が「inner」の要素を表示することを目的としています。しかし、残念なことに、移行は期待どおりに機能しません。スムーズな移行ではなく、指定された移行期間に一致する遅延の後に可視性が突然切り替わります。

犯人

根本原因は可視性の性質にあります。財産。連続値 (0 ～ 1) を表す不透明度などのプロパティとは異なり、可視性はバイナリ状態 (表示または非表示) で存在します。この基本的な違いは、補間する中間状態がないため、遷移を妨げます。

遷移可能なプロパティ

遷移は、2 つの数値の間のキーフレームの計算に依存します。不透明度の場合、トランジションは 0 と 1 の間でスムーズにフェードアウトします。ただし、可視性の場合、トランジションには補間に必要な数値範囲が不足します。

結論

一方最初はバグに似ていますが、この動作は CSS トランジションに固有の制限です。スムーズにアニメーション化できるのは、計算可能な値を持つプロパティのみです。可視性などのバイナリ プロパティの場合、突然の状態変化は避けられません。

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