模仿 IE 中的 CSS3 过渡？

Posted 2023-03-06

【中文标题】模仿 IE 中的 CSS3 过渡？

【英文标题】：Imitate CSS3 transition in IE?

【发布时间】：2011-09-26 12:20:34

【问题描述】：

我正在使用规则组合来以尽可能跨浏览器兼容的方式实现 CSS3 transition 规则：我正在使用 transition、-webkit-transition、-moz-transition 和 -o-transition .

对于任何版本的 Internet Explorer，是否有类似的 -ms-transition 属性？是否有针对旧版本 IE 的专有过滤器，类似于以下规则在 IE 6-8 中对不透明度的作用？

/* IE 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft. Alpha(Opacity=50)"; 
/* IE 5-7 */ 
filter: alpha(opacity=50);

【问题讨论】：

简答，不。您必须以某种形式使用 javascript 才能在 IE9 中实现相同的效果。我的理解是 IE10 会有 CSS3 过渡。

【参考方案1】：

在旧版本的 IE 中没有任何类型的过渡效果。

据我所知，要接近它的唯一方法是使用 JQuery 的 fadeIn() 和 fadeOut() 方法，它们实际上在所有版本的 IE 中都有效。

但是，我应该提醒他们，它们仍然违反了 IE 臭名昭著的不透明处理能力。 JQuery 的淡入淡出效果在与 IE6-8 一起使用时可能会出现一些奇怪的故障，尤其是在淡入包含图形的块时。

如果您决定尝试一下，代码非常简单。只需在标题中包含 JQuery，然后：

$('#myelement').fadeIn();

在适当的地方。

有关详细信息，请参阅JQuery FadeIn manual page。

当然，这将代替任何 CSS 过渡效果；这一切都是通过 Javascript 完成的，您可能需要丢弃 CSS3 过渡，否则它会与 JQuery 效果发生冲突。但如果你想让它与 IE 一起工作，那就是你要付出的代价。

正如我所说，请注意故障。对其进行测试，看看它适合您。

这是唯一的方法，所以如果你真的需要 IE 中的过渡效果，那就是你需要做的，但要准备好接受它可能看起来并不那么好。

Mootools 或 Dojo 等其他 Javascript 库可能具有类似的效果，您也可以尝试，但我想如果他们确实有，他们也会遇到同样的问题。

【讨论】：

谢谢。我想我会坚持使用 CSS3 过渡作为渐进式增强工具——它们对网站来说并不重要。

【参考方案2】：

IE10 将具有 CSS3 过渡，在此之前您必须使用 javascript。

【参考方案3】：

我在研究同一个问题时遇到了这个问题：http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

我还发现了一个名为 move.js 的库，它可以与 CSS3 过渡一起使用：https://github.com/visionmedia/move.js

希望这会有所帮助。

【参考方案4】：

CSS3 过渡规则和其他 CSS3 规则在 IE 10 中工作正常。不再需要前缀“-ms-”，但仍可识别。为确保将来的兼容性，应相应地更新使用 Microsoft 供应商前缀和转换属性的应用程序。因此，更新您的 CSS 代码，添加符合规则的行，不带任何前缀。

【参考方案5】：

对于 IE http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/ 或 http://addyosmani.com/blog/css3transitions-jquery/（链接失效）

【讨论】：

只粘贴链接不是一个好习惯 - 请访问meta.***.com/tags/link-only-answers/info