模仿IE中的CSS3过渡？

发布于 2024-11-17 22:01:53 字数 451 浏览 4 评论 0原文

我使用规则组合来以尽可能跨浏览器兼容的方式实现 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);

原文

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);

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

诺曦 2024-11-24 22:01:53

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

据我所知，获得接近它的唯一方法是使用 JQuery 的 fadeIn() 和 fadeOut() 方法，它们实际上适用于所有版本的 IE。

然而，我应该提醒大家，它们仍然与 IE 众所周知的糟糕的不透明度处理相冲突。当与 IE6-8 一起使用时，JQuery 的淡入淡出效果可能会出现一些奇怪的故障，特别是当您淡入包含图形的块时。

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

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

在适当的位置。

有关详细信息，请参阅 JQuery FadeIn 手册页。

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

正如我所说，要小心故障。测试一下，看看它是否适合您。

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

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

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.

回复收藏 0 原文