我使用一组规则来以尽可能跨浏览器兼容的方式实现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);
发布于 2011-07-01 19:48:01
在旧版本的IE中没有任何类型的过渡效果。
据我所知,唯一接近它的方法是使用JQuery的fadeIn()
和fadeOut()
方法,它们确实可以在所有版本的IE中工作。
然而,我应该提醒的是,它们仍然与IE臭名昭著的糟糕的不透明度处理相冲突。当与IE6-8一起使用时,JQuery的淡入淡出效果可能会有一些奇怪的毛刺,特别是当您淡入淡出包含图形的块时。
如果你决定尝试一下,代码就会变得非常简单。只需在标头中包含JQuery,然后:
$('#myelement').fadeIn();
在适当的地方。
有关详细信息,请参阅JQuery FadeIn manual page。
当然,这将替代任何CSS过渡效果;这都是通过Javascript完成的,您可能需要丢弃您的CSS3过渡,否则它将与JQuery效果发生冲突。但是如果你想让它和IE一起工作,这就是你要付出的代价。
正如我所说的,要当心小故障。测试它,看看它对你来说是什么样子。
这是唯一的方法,所以如果你真的需要IE中的过渡效果,这就是你需要做的,但要准备好接受它看起来可能并不那么好。
其他Javascript库,如Mootools或Dojo,可能也有类似的效果,你也可以尝试一下,但我可以想象,如果他们有,他们也会遇到同样的问题。
发布于 2012-06-12 08:26:54
我在研究同样的问题时遇到了这个问题:http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
我还发现了一个名为move.js的库,它可以与CSS3转换一起使用:https://github.com/visionmedia/move.js
希望这能有所帮助。
发布于 2011-07-01 20:41:26
IE10将有CSS3转换,在此之前你将不得不使用javascript。
https://stackoverflow.com/questions/6544162
复制相似问题