我需要让CSS3过渡效果在IE9中正常工作。

Question

我使用CSS transition为客户创建了一张贺卡，但不知道它与IE9不兼容。

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

是否有方法可以使其在IE9中正常工作？尝试使用jQuery或其他方法 - 任何可行的方式都可以让它在IE9中运行。

谢谢

- 15eme Doctor

---

请查看此帖子：https://dev59.com/F2ox5IYBdhLWcg3wql9t，您需要在JavaScript中处理所有动画作为IE9的后备。 - JanR

Answer 1

正如您已经正确地识别的那样，Internet Explorer 9是最后一个不支持transition属性或animations的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 及以上。

希望这可以帮到您！

- Sampson

---

你好，你有那个animation-legacy-support.js的链接吗？ - Keensleeeeeeee

那是上面代码的建议文件名。在你创建它之前，它并不存在 :) - Sampson

Answer 2

您可以尝试使用JQuery Transit来逆向处理。 http://ricostacruz.com/jquery.transit/ 它将JQuery样式的过渡效果映射到CSS3过渡效果，并且通过适当的代码（如下），如果CSS3过渡效果不可用，则可以优雅地回退到标准的JQuery。

JQuery Transit使用一个简单的Javascript方法transition()来执行每个操作。语法与JQuery animate()非常相似。

$('.box').transition({ opacity: 0 });

如果你将transition()映射到JQuery animate()，它会在标准的JQuery中执行相同的操作（如果可用）。以下代码（来自示例页面）将在CSS3转换不可用时使用animate()：

// Delegate .transition() calls to .animate()
// if the browser can't do CSS transitions.

if (!$.support.transition)
  $.fn.transition = $.fn.animate;

- FrancescoMM