如何添加过渡/效果来显示：块答案

【问题标题】：How to add transitions/effects to display:block如何添加过渡/效果来显示：块
【发布时间】：2013-02-11 02:51:55
【问题描述】：

我有一个这样的 div：

.x{
   ...
}

还有一种最初隐藏的“子菜单”：

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

只有当用户在 x div 上时子菜单才可见：

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

现在，我想通过交易或效果使其可见，使可见性更“慢”。有没有办法实现这个目标，可能是跨浏览器的解决方案？谢谢，一个

【问题讨论】：

标签： html css css-transitions

【解决方案1】：

不，没有。 CSS 转换仅适用于标量值，因此它们可以应用于处理尺寸、颜色（因为这些也以 rgb 值表示）、不透明度等属性。其他值（如 display、float、font-family 等）无法转换因为没有可能的中间状态可以显示。您将不得不退回到使用 JavaScript 或尝试使用 opacity 之类的属性或将height: 0 之类的变通方法应用于height: 100px

【讨论】：

【解决方案2】：

您将无法在“显示”属性上进行转换。您必须使用 'opacity' 属性来实现这一点。

相关：

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+ */
}

【讨论】：

【解决方案3】：

最好的选择是不透明度：

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/

【讨论】：