web-dev-qa-db-ja.com

可視性を使用した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;
}
csscss3css-transitions
74
user4150760

これはバグではありません-順序/計算可能なプロパティでのみ遷移できます（これを考える簡単な方法は、数値の開始と終了を持つプロパティです数値。ただし、いくつかの例外があります）。

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

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

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

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

110
SW4

可視性はアニメート可能です。それについてのこのブログ投稿を確認してください： 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>
38
Sevban Öztürk

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

実際には、要素を隠すためのさまざまな視覚効果を想像できるため、これも有用な動作です。要素のフェードアウトは、不透明度を使用して指定される視覚効果の一種です。他の視覚効果は、例えば変換プロパティ。 http://taccgl.org/blog/css-transition-visibility.html も参照してください。

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

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

13
Helmut Emmelmann