我需要CSS3过渡才能在IE9中运行

Question

我为具有css转换的客户端创建了一张贺卡,但我不知道它与IE9不兼容.

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

有没有办法让这个在IE9中工作？把一个jQuery或任何黑客 - 一些东西让它在IE9中工作.

谢谢

Answer 1

正如您已正确识别的那样,Internet Explorer 9是最后一个不支持该transition属性或动画的IE浏览器.话虽这么说,它也是最后一个支持条件评论的IE浏览器,所以你可以想象将后备代码放入一个只有IE9的条件评论中,并将其作为你的解决方案提供给所有IE9(及以下)用户.

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

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

(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并设置目标状态,以及动画持续时间.

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

希望这可以帮助!