CSS 在 IE 中模仿 CSS3 过渡?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6544162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Imitate CSS3 transition in IE?
提问by daysrunaway
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
.
我使用的规则的组合来实现CSS3transition
的跨浏览器兼容的方式可能的规则:我使用transition
,-webkit-transition
,-moz-transition
,和-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?
-ms-transition
任何版本的 Internet Explorer都有类似的属性吗?是否有适用于旧版本 IE 的专有过滤器,类似于以下规则如何处理 IE 6-8 中的不透明度?
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft. Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
回答by Spudley
There isn't any kind of transition effect in older versions of IE.
在旧版本的 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.
我所知道的接近它的唯一方法是使用 JQueryfadeIn()
和fadeOut()
方法,它们实际上适用于所有版本的 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.
但是,我要提醒的是,它们仍然与 IE 众所周知的糟糕的不透明度处理相冲突。当与 IE6-8 一起使用时,JQuery 的淡入淡出效果可能会出现一些奇怪的故障,尤其是当您淡化包含图形的块时。
If you decide to try it, the code is dead simple. Simply include JQuery in your headers, and then:
如果您决定尝试一下,代码非常简单。只需在标题中包含 JQuery,然后:
$('#myelement').fadeIn();
in the appropriate place.
在适当的地方。
See the JQuery FadeIn manual pagefor further information.
有关详细信息,请参阅JQuery FadeIn 手册页。
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.
当然,这将代替任何 CSS 过渡效果;这一切都是通过 Javascript 完成的,您可能需要丢弃 CSS3 转换,否则会与 JQuery 效果发生冲突。但是,如果您希望它与 IE 一起使用,这就是您要付出的代价。
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.
这是唯一的方法,所以如果你真的需要 IE 中的过渡效果,这就是你需要做的,但准备好接受它可能看起来不太好。
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.
其他 Javascript 库,例如 Mootools 或 Dojo 可能有类似的效果,您也可以尝试,但我想如果他们确实拥有它,他们会遇到同样的问题。
回答by user1429980
I ran into this while researching the same question: http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
我在研究同样的问题时遇到了这个问题: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
我还发现了一个名为 move.js 的库,它可以与 CSS3 过渡一起使用:https: //github.com/visionmedia/move.js
Hope this helps.
希望这可以帮助。
回答by halliewuud
IE10 will have CSS3 transitions, until then you will have to use javascript.
IE10 将具有 CSS3 过渡,在此之前您将不得不使用 javascript。
回答by Generalski
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.
CSS3 过渡规则和其他 CSS3 规则在 IE 10 中工作正常。不再需要前缀“-ms-”,但仍会被识别。为确保将来的兼容性,应相应更新使用 Microsoft 供应商前缀和转换属性的应用程序。所以,更新你的 CSS 代码,添加带有规则的行,没有任何前缀。
回答by GiorgosK
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)
对于 IE < 10,您可以尝试其中一种我没有亲自尝试过但它们看起来很有希望
http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/或
http://addyosmani.com /blog/css3transitions-jquery/(断开的链接)