我使用的规则的组合来实现CSS3 transition的跨浏览器兼容的方式可能的规则:我使用transition,-webkit- transition,-moz-transition,和-o-transition。
transition
-webkit- transition
-moz-transition
-o-transition
-ms-transition任何版本的Internet Explorer 是否都具有类似的属性?是否有针对旧版IE的专有过滤器,类似于以下规则在IE 6-8中的不透明度如何起作用?
-ms-transition
/* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft. Alpha(Opacity=50)"; /* IE 5-7 */ filter: alpha(opacity=50);
在旧版本的IE中没有任何过渡效果。
我所知道的唯一接近它的方法是使用JQuery fadeIn()和fadeOut()方法,它们在IE的所有版本中都有效。
fadeIn()
fadeOut()
但是,我应该警告,它们仍然会受到IE众所周知的不透明处理能力的影响。当与IE6-8一起使用时,JQuery的淡入淡出效果可能会有些奇怪的毛刺,尤其是当您正在淡化包含图形的块时。
如果您决定尝试使用该代码,那么代码将变得非常简单。只需在标题中包含JQuery,然后:
$('#myelement').fadeIn();
在适当的地方。
当然,这将代替任何CSS过渡效果;这些都是通过Javascript完成的,您可能需要放弃CSS3转换,否则它将与JQuery效果发生冲突。但是,如果您希望它与IE一起使用,那就是您要付出的代价。
就像我说的,提防小故障。测试一下,看看它看起来如何。
这是唯一的方法,因此,如果您确实需要IE中的过渡效果,那是您需要做的,但是要准备接受它看起来可能并不那么好。
其他Javascript库(例如Mootools或Dojo)可能会产生类似的效果,您也可以尝试使用,但是我想如果他们确实拥有它,它们将遭受相同的问题。