internet-explorer-9 - 我需要CSS3过渡才能在IE9中工作

Question

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

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

有没有一种方法可以使此工作在IE9中进行？放置jQuery或其他任何hack-要使其在IE9中正常工作是一件事情。

谢谢

Answer 1

如您所知，Internet Explorer 9是最后一种不支持 transition property或animations的IE浏览器。话虽如此，它也是最后一个支持conditional comments的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 并设置您的目标状态以及动画持续时间。

需要注意的重要一件事是，您需要加载a version of jQuery that supports your target IE versions。 jQuery 2.x仅支持Internet Explorer 9及更高版本，但是jQuery 1.x支持Internet Explorer 6及更高版本。

希望这可以帮助!