Question

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

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

令我惊讶和失望的是，这是一种马车。

在 Firefox 中，当我悬停时，子元素会在淡出 out 之前切换为完全不透明。但是，嘿，我希望它从完全透明开始，然后在中淡化！

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

在 IE （包括IE10 PP）中，它也只是切换display（正如预期的那样，尽管我希望它会在IE10中生成动画）。

在 Opera 中，一切都运行得很好。＆lt; 3＆lt; 3

现在，如果我从初始声明中删除display:none;，动画在 Fx 中运行得很漂亮，但是我会遇到uncool浏览器的问题，这在浏览器中很可能占主导地位这个特别的项目。

由于我拥有Modernizr的强大功能，我可以简单地创建一个条件样式，这样我只能在愚蠢的浏览器上使用display切换，生活再次成为现实，但问题仍然存在：

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

这是一个小提琴，供您查看：http://jsfiddle.net/TheNix/q5bAZ/4/

Answer 1

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

有一些......关于规范应该怎么说的热烈讨论。查看从http://lists.w3.org/Archives/Public/www-style/2011Dec/0353.html开始并经过最近4个月左右的帖子。

Answer 2

只需省略display声明并添加

即可

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

现在定位IE和其他旧浏览器，你应该没问题。

如果你想要超精确，你可以把过滤器放到一个额外的IE样式表中，这样你就不会用愚蠢的IE东西使你的样式表无效。（但只有xD的专有前缀）

使用CSS3使用display：none为不透明度设置动画

2 个答案: