可視性のないCSS遷移が機能しない

以下のフィドルでは、可視性と不透明性を別々に切り替えています。後者は機能しますが、前者は機能しません。さらに、可視性の場合、遷移時間はホバーアウトの遅延として解釈されます。ChromeとFirefoxの両方で発生します。これはバグですか？

http://jsfiddle.net/0r218mdo/3/

ケース1：

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

ケース2：

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

これはバグではありません -序数/計算可能なプロパティでのみ遷移できます（これは、数値の開始番号と終了番号の値を持つ任意のプロパティです。いくつか例外があります）。

これは、トランジションが2つの値の間のキーフレームを計算し、中間の量を外挿してアニメーションを生成することにより機能するためです。

visibility この場合はバイナリ設定（表示/非表示）であるため、遷移期間が経過すると、プロパティは状態を切り替えるだけで、これは遅延として表示されますが、実際には遷移アニメーションの最終キーフレームとして表示できます。中間キーフレームが計算されていない（非表示/表示の間の値を構成するもの？不透明度？寸法？明示されていないため、計算されません）。

opacity は値の設定（0-1）であるため、指定された期間にわたってキーフレームを計算できます。

移行可能な（アニメーション可能な）プロパティのリストはここにあります

可視性はアニメート可能です。それについてのこのブログ投稿をチェックしてください：http : //www.greywyvern.com/? post =337

ここでも確認できます：https : //developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

マウスホバーでフェードインおよびフェードアウトしたいメニューがあるとします。opacity:0のみを使用する場合、透明なメニューはそのまま残り、非表示の領域にカーソルを合わせるとアニメーション化されます。しかし、を追加するとvisibility:hidden、この問題を排除できます。

div {
    width:100px;
    height:20px;
}
.menu {
    visibility:hidden;
    opacity:0;
    transition:visibility 0.3s linear,opacity 0.3s linear;
    
    background:#eee;
    width:100px;
    margin:0;
    padding:5px;
    list-style:none;
}
div:hover > .menu {
    visibility:visible;
    opacity:1;
}

<div>
  <a href="#">Open Menu</a>
  <ul class="menu">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
</div>

可視性は仕様に従ってアニメート可能なプロパティですが、予想どおり、可視性の遷移は徐々に機能しません。代わりに、要素を非表示にする表示遅延で遷移します。一方、要素を表示するとすぐに機能します。これは、仕様で定義されているとおり（デフォルトのタイミング関数の場合）、ブラウザに実装されているためです。

要素を非表示にするさまざまな視覚効果を実際に想像できるため、これも便利な動作です。要素のフェードアウトは、不透明度を使用して指定される視覚効果の一種にすぎません。その他の視覚効果は、たとえば、transformプロパティを使用して要素を移動する可能性があります。http：//taccgl.org/blog/css-transition-visibility.htmlも参照してください。

多くの場合、不透明度の遷移と可視性の遷移を組み合わせると便利です。不透明度は正しいように見えますが、完全に透明な要素（不透明度：0）は引き続きマウスイベントを受け取ります。したがって、たとえば不透明遷移のみでフェードアウトされた要素のリンクは、クリックには応答しますが（表示されません）、フェードされた要素の背後のリンクは機能しません（フェードされた要素を通して表示されます）。http://taccgl.org/blog/css-transition-opacity-for-fade-effects.htmlを参照してください。

この奇妙な動作は、両方のトランジション、可視性のトランジションと不透明度のトランジションを使用することで回避できます。これにより、visibilityプロパティを使用して要素のマウスイベントを無効にし、視覚効果に不透明度を使用します。ただし、視覚効果の再生中に要素を非表示にしないように注意する必要があります。ここでは、可視性遷移の特別なセマンティクスが便利になります。要素を非表示にすると、要素は視覚効果の再生中は表示されたままになり、後で非表示になります。一方、要素を表示する場合、可視性の遷移により、要素がすぐに、つまり視覚効果を再生する前に表示されます。