Imitate CSS3 transition in IE?

让人想犯罪 __ 提交于 2019-12-17 16:07:48

问题


I'm using a combination of rules to achieve the CSS3 transition rule in as cross-browser compatible a way as possible: I'm using transition, -webkit-transition, -moz-transition, and -o-transition.

Is there a similar -ms-transition property for any version of Internet Explorer? Is there a proprietary filter for older versions of IE, similar to how the following rules work for opacity in IE 6-8?

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

回答1:


There isn't any kind of transition effect in older versions of IE.

The only way that I know of to get anything close to it is to use JQuery's fadeIn() and fadeOut() methods, which do actually work in all versions of IE.

However, I should caution that they still fall foul of IE's notoriously poor opacity handling. JQuery's fade effects can have some weird glitches when used with IE6-8, especially if you're fading a block which contains graphics.

If you decide to try it, the code is dead simple. Simply include JQuery in your headers, and then:

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

in the appropriate place.

See the JQuery FadeIn manual page for further information.

Of course, this would be instead of any CSS transition effect; it's all done through Javascript, and you'd probably need to throw away your CSS3 transitions, or it'll clash with the JQuery effects. But if you want it to work with IE, that's the price you'll pay.

And as I say, watch out for the glitches. Test it, and see how it looks for you.

It's the only way to do it, so if you really need a transition effect in IE, that's what you'll need to do, but be prepared to accept that it may not look all that good.

Other Javascript libraries such as Mootools or Dojo may have similar effects which you could also try, but I would imagine if they do have it, they'd suffer from the same issues.




回答2:


I ran into this while researching the same question: http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

I also found a library called move.js, which can be used alongside CSS3 transitions: https://github.com/visionmedia/move.js

Hope this helps.




回答3:


IE10 will have CSS3 transitions, until then you will have to use javascript.




回答4:


CSS3 transition rule and other CSS3 rules works fine in IE 10. Prefix "-ms-" is no longer required, but will still be recognized. To ensure compatibility in the future, applications using the Microsoft vendor prefix with transition properties should be updated accordingly. So, update your CSS code, add line with rule, without any prefix.




回答5:


for IE < 10 you can try either one of those I have not tried personally but they look promising http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/ or http://addyosmani.com/blog/css3transitions-jquery/ (broken link)



来源:https://stackoverflow.com/questions/6544162/imitate-css3-transition-in-ie

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!