CSS の可視性の遷移が不透明度のように機能しないのはなぜですか?

CSS の可視性に対するトランジション効果

問題の概要

トランジション効果は、スムーズなアニメーションを作成するために CSS でよく使用されます。ただし、可視性などの特定のプロパティに移行するときに問題が発生します。この状況では、トランジションは期待どおりに機能していないようで、不透明度などの他のプロパティとは動作が異なります。

可視性と不透明度のトランジション

提供された例では、要素の可視性と不透明度にトランジションが適用されます:

可視性の場合:

#inner {
  visibility: hidden;
  transition: visibility 1000ms;
}
#outer:hover #inner {
  visibility: visible;
}

不透明度の場合:

#inner1 {
  opacity: 0;
  transition: opacity 1000ms;
}
#outer1:hover #inner1 {
  opacity: 1;
}

トランジション効果不透明度については期待どおりに機能しますが、可視性についてはトリガーできません。遷移時間を 1000 ミリ秒に設定しているにもかかわらず、アニメーションは観察されません。

説明

観察された動作はバグではなく、遷移効果が実装されている方法の結果です。 CSS。トランジションは、2 つの値の間でキーフレームを計算し、中間状態をアニメーション化することによって機能します。ただし、可視性はバイナリ値 (可視または非表示) であり、これらの状態間で数値を使用することはできません。

その結果、遷移期間は可視性プロパティが非表示から切り替わるまでの遅延として解釈されます。ホバーすると表示されます (またはその逆)。この遅延はトランジションの効果を模倣しますが、不透明トランジションと同じ意味での真のアニメーションではありません。

トランジション可能なプロパティ

スムーズなアニメーションを確保するには、トランジションは次のようにする必要があります。数値による明確な開始値と終了値を持つ順序プロパティに適用されます。移行可能なプロパティのリストは、次のリンクにあります:

[移行可能なプロパティのリファレンスへのリンク]

以上がCSS の可視性の遷移が不透明度のように機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。