我需要CSS3过渡才能在IE9中工作 [英] I need CSS3 transition to work in IE9

问题描述

我为具有CSS转换的客户端创建了贺卡，但我不知道它与IE9不兼容。

I create a greeting card for a client with css transition but I did not know that it was not compatible with IE9.

贺卡是这张 http://voeux.geekarts.fr/v4.html

是有没有办法让它在IE9中工作？

Is there a a way to get this working in IE9 ? putting a jQuery or any hack - some thing to get it to work in IE9.

谢谢

推荐答案

您已经正确地确定，Internet Explorer 9是最后一个不支持 过渡属性，或动画。话虽如此，它也是支持条件注释，因此可以想象将后备代码放入仅IE9的条件注释中，并将其作为解决方案提供给所有IE9（及以下）用户。

As you've properly identified, Internet Explorer 9 was the last of the IE browsers to not support the transition property, or animations. That being said, it was also the last of the IE browsers to support conditional comments, so you could conceivably put fallback code into an IE9-only conditional comment, and deliver that as your solution to all IE9 (and below) users.

<!--[if lte IE 9]>
    <script src="animation-legacy-support.js"></script>
<![endif]-->

当然，这只能在Internet Explorer 9或更低版本的浏览器中提供。现在，剩下要做的就是设置jQuery动画本身。例如，我们可以通过以下一系列转换来运行图像：

This, of course, would only be delivered in the browser is Internet Explorer 9 or below. Now, all you have left to do is setup the jQuery animation itself. For example, we could run an image through a series of transitions like this:

(function () {

    "use strict";

    $("img.kitten")
        .animate({ width:   300 }, 1000)  // Animate to 300px wide
        .animate({ width:    50 }, 2000)  // Then, to 50px wide
        .animate({ opacity: .25 }, 1000); // Then, make it semi-transparent

}());

每次您需要设置另一个关键帧时，只需添加另一个调用即可 $。fn.animate 并设置目标状态以及动画持续时间。

Each time you need to setup another keyframe, just add another call to $.fn.animate and setup your target state, as well as the animation duration.

要注意的重要一件事是，您需要加载支持您的目标IE版本的jQuery版本。 jQuery 2.x仅支持Internet Explorer 9及更高版本，但是jQuery 1.x支持Internet Explorer 6及更高版本。

One important thing to note is that you'll need to load in a version of jQuery that supports your target IE versions. jQuery 2.x only supports Internet Explorer 9 and up, however, jQuery 1.x supports Internet Explorer versions 6 and up.

希望这会有所帮助！

这篇关于我需要CSS3过渡才能在IE9中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！