使用 CSS3 通过 display:none 为不透明度设置动画

Question

我有一个元素，带有一个最初隐藏的子容器。当我将鼠标悬停在父级上时，应该显示子级。很简单。

现在，对于真正的浏览器，我想添加一些功能并让孩子淡入 - 同时仍然保留非 CSS3 兼容浏览器的基本功能。对于旧浏览器，我只需切换display，同时为所有使用酷炫浏览器的孩子制作opacity 动画。应该是简单的操作吧？

令我非常惊讶和失望的是，这有点像马车。

在 Firefox 中，当我将鼠标悬停在上面时，子元素会切换为完全不透明，然后淡出 out。但是，嘿，我希望它一开始是完全透明的，然后淡入 in！

在 Webkit 中，动画不会触发 - 只有 display 切换。

在 IE（包括 IE10 PP）中，它也只是简单地切换 display（正如预期的那样，虽然我希望它会在 IE10 中动画）。

在 Opera 中一切正常。

现在，如果我从初始声明中删除 display:none;，动画在 Fx 中效果很好，但是我会遇到不酷的浏览器的问题，遗憾的是，这在访问者中占主导地位特定项目。

由于我拥有 Modernizr 的功能，我可以简单地制作一个条件样式，以便我只在愚蠢的浏览器上使用display 切换，生活又美好了，但问题仍然存在：

这是 Fx/Webkitz 中的错误，还是故意的？

这里有一个小提琴供你看：http://jsfiddle.net/TheNix/q5bAZ/4/

Answer 1

只需省略display 声明并添加

-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(opacity=x); // x =  0 ... 100.

现在针对 IE 和其他较旧的浏览器，您应该没问题。

如果您想更加准确，您可以将过滤器放入额外的 IE 样式表中，这样您就不会因为愚蠢的 IE 内容而使您的样式表无效。 （但只有专有前缀 xD）

Answer 2

问题在于计算值更改时会发生转换，并且当设置display: none 时，浏览器不会计算大多数属性的值。

有一些……关于规范应该说什么的热烈讨论。请参阅从 http://lists.w3.org/Archives/Public/www-style/2011Dec/0353.html 开始并在过去 4 个月左右的帖子。