如何添加轉場/特效爲display：block

我有這樣一個div：如何添加轉場/特效爲display：block

.x{ 
    ... 
}

而一種「子菜單」最初是隱藏的：

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

子菜單將是可見的只有當用戶在x div上時：

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

現在，我想使其可見的事務或效果使可見性更「慢」。有沒有一種方法可以通過跨瀏覽器解決方案實現該目標？謝謝， A

來源

2013-02-25 andreaxi

您將無法在'display'屬性上進行過渡工作。您必須使用「不透明度」屬性來實現此目的。

涉及：

Jim Jeffers解釋：

要解決此總是允許該元素被顯示塊，但通過調整任何隱藏元件這些手段：

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-25 20:34:33

不，沒有。 CSS轉換僅適用於標量值，因此它們可以應用於處理尺寸，顏色（如rgb值中所示）的屬性，opacty等。其他值（如display，float，font-family等）不能轉換因爲沒有可能的中間狀態顯示。您必須重新使用JavaScript或嘗試使用像opacity之類的屬性或應用替代方法，如height: 0到height: 100px

來源

2013-02-25 20:34:10

最好的辦法是用不透明度：

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-25 20:36:55

如何添加轉場/特效爲display：block

回答

相關問題