3

私はこのようなdivを持っています：

.x{
   ...
}

そして、最初は隠されていた一種の「サブメニュー」：

.x_submenu {
   ...
   display:none;
   ...
}

サブメニューは、ユーザーがxdivを使用している場合にのみ表示されます。

div.x:hover .x_submenu {display:block; }

ここで、可視性をより「遅く」するトランザクションまたはエフェクトで可視化したいと思います。おそらくクロスブラウザソリューションを使用して、その目標を達成する方法はありますか？ありがとう、A

4

3 に答える 3

2

最適なオプションは不透明度です。

HTML：

<p><b>Note:</b> This example does not work in Internet Explorer.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

Css：

div
{
opacity:0;
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
opacity:100;
width:300px;
}

デモを参照してください：http：//jsfiddle.net/wyKyT/

于 2013-02-25T20:36:55.437 に答える
1

'display'プロパティでトランジションを機能させることはできません。'opacity'プロパティを使用してこれを達成する必要があります。

関連：

ジムジェファーズは説明しました：

これを回避するには、要素を常に表示ブロックにしますが、次のいずれかの手段を調整して要素を非表示にします。

Set the height to 0.
Set the opacity to 0.
Position the element outside of the frame of another element that has overflow: hidden.

そして、あなたの移行のために、それを「クロスブラウザ」にするために：

.transition {
 -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera     12.50+ */
}
于 2013-02-25T20:34:33.853 に答える
0

いいえ、ありません。CSSトランジションはスカラー値に対してのみ機能するため、ディメンション、色（これらは、rgb値でも表されるため）、不透明度などを処理するプロパティに適用できます。display、float、font-familyなどの他の値はトランジションできません。表示できる中間状態がないためです。JavaScriptの使用にフォールバックするか、次のようなプロパティを操作したり、次のようなopacity回避策を適用したりする必要があります。height: 0height: 100px

于 2013-02-25T20:34:10.397 に答える