web-dev-qa-db-ja.com

子要素のホバー時のCss遷移

親にカーソルを合わせると、子要素の表示を一時停止しようとしています。

HTML：

<span>
    <div>This Is The Child</div>
    Some Text in the span
</span>

Css：

span { 
    position: relative; 
}
span div { 
    display: none;
    width: 0px;
    opacity: 0;

    transition: width 5s;
    -webkit-transition: width 5s;

    transition: opacity 5s;
    -webkit-transition: opacity 5s;
}
span:hover div {
    display: inline-block;
    width: 150px;
    opacity: 1;
}​

現在のところ、スパンをホバーすると、divは表示されるまで遅延がありません。一時停止するように修正するにはどうすればよいですか？

ここでフィドル： http://jsfiddle.net/SReject/vmvdK/

いくつかの注意：
私はもともと表示を移行しようとしましたが、エドワードが指摘したように、それは不可能であり、上記も機能しないことを試してみました。

解決済み

「transitionto」スタイリングの「display」プロパティは、遷移アニメーションの発生を停止するように見えます。これを回避するには。表示する子の幅を0pxに設定し、完全に透明にします。次に、「transition to」スタイリングで、正しい幅を設定し、divをソリッドにします。

HTML：

<span>
    <div>This Is The Child</div>
    Some Text in the span
</span>

Css：

span { 
    position: relative; 
}
span div { 
    position: absolute;

    width: 0px;
    opacity: 0;
    transition: opacity 5s;
    -webkit-transition: opacity 5s;
}
span:hover div {
    width: 150px;
    opacity: 1;
}​

ここでフィドル： http://jsfiddle.net/SReject/vmvdK/

cssparent-childcss-transitions
14
SReject

CSSトランジションに関するMDNページ によって参照されるCSSトランジションに関する この記事 によると、displayプロパティはトランジションできるプロパティではありません。

移行する必要のあるプロパティまたは値がいくつかありますが、これらは、執筆時点では指定されておらず、サポートされていません。

  • background-image、グラデーションを含む
  • .。
  • displayなしと他のものの間

したがって、transition: display 5s;プロパティをdivに適用しても効果はありません。

編集：

更新されたコードに基づいて、displayプロパティを指定しない限り、不透明度と幅で目的の効果を実現できます。行を削除するだけです

display: none;

span divセクションから、ポップアップメニューにカーソルを合わせると指定したトランジションが使用されます。

display:none;からdisplay:inline-blockへの遷移はアニメーション化できないため、このプロパティはおそらく遷移の最後にのみ変更されます。したがって、不透明度はdivがまだ表示されていない間にアニメーション化されます。

13
Edward