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

Posted 2023-03-06

【中文标题】使用 CSS3 通过 display:none 为不透明度设置动画

【英文标题】：Using CSS3 to animate opacity with display:none

【发布时间】：2012-05-31 21:05:53

【问题描述】：

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

现在，对于真正的浏览器，我想添加一些功能并让孩子淡入 - 同时仍然保留非 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/

【问题讨论】：

切换父元素，并在子元素属性上设置过渡很有用。定位和可见性的组合也很有效。

【参考方案1】：

只需省略display 声明并添加

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

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

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

【讨论】：

这也是一种方法，但我对filter 过敏。但是，我已经在我的问题中提供了一个可行的解决方案。我正在寻找的是关于浏览器为什么会这样行为的一些理论。

【参考方案2】：

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

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

【讨论】：

有趣的东西！干杯，鲍里斯。现在它对我来说更有意义了，即使我不明白为什么它在 Opera 中工作。我也找不到任何迟于December 14 2011 的回复。还有更多吗？我想读惊心动魄的结论。 :)

是的，还有更多。愚蠢的档案按月细分。如果你去lists.w3.org/Archives/Public/www-style 并在以后的几个月里寻找那个主题，你可以看到更多的对话内容。还没有激动人心的结论！

不设置 display: none 有时是不可能的，因为元素在不透明时仍会占用一些空间。一个解决方案可能是将max-height 设置为零，并为max-height 设置动画（持续时间：0s），并且在淡出时延迟该动画。

还有：2017，问题依然存在！