14

親が上に置かれているときに、子要素の表示を一時停止しようとしています。

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/

いくつかのメモ：
私はもともとディスプレイを移行しようとしましたが、エドワードが指摘したように、それは不可能であり、上記を試してもうまくいきませんでした

解決した

「transition to」スタイリングの「display」プロパティは、遷移アニメーションの発生を停止するように見えます。これを回避するには。表示する子の幅を0pxにして、完全に透明にしました。次に、「遷移先」スタイリングで、正しい幅を設定し、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/

4

2 に答える 2

13

MDN ページ on CSS transitionsで参照されている CSS transitions に関するこの記事によると、このプロパティは遷移可能なものではありません。display

移行したいプロパティまたは値がいくつかありますが、これらは執筆時点では仕様もサポートもされていません。

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

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

編集：

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

display: none;

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

display:none;からへのトランジションはdisplay:inline-blockアニメーション化できないため、このプロパティはトランジションの最後にのみ変更される可能性がありdivます。

于 2012-07-14T22:00:05.833 に答える
-2

使ってみました-webkit-transition-delay: ;か？そうでない場合、これはあなたが探しているものかもしれませんか?

コードにいくつかの変更を加えました:

span div { 
position: absolute;
left: 5px;
top: 5px;
border: 1px solid #000;
background-color: #888;
width: 0px;
opacity: 0;
cursor: pointer;

}

span:hover div {
display: inline-block;
-webkit-transition-delay: 2s;
width: 150px;            
opacity: 1;

} </p>

そして、これがデモです

于 2012-07-14T22:33:06.030 に答える