我需要在IE9中工作的CSS3转换

Question

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

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

有没有办法在IE9中实现这一点？在IE9中放置一个jQuery或者其他一些东西来让它工作。

谢谢

Answer 1

正如您已经正确认识到的，Internet Explorer9是最后一个不支持transition property或animations的IE浏览器。这就是说，它也是IE浏览器中最后一个支持conditional comments的浏览器，所以您可以将回退代码放入仅支持IE9的条件注释中，并将其作为您的解决方案提供给所有IE9(及以下)用户。

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

当然，这只能在Internet Explorer9或更低版本的浏览器中提供。现在，您要做的就是设置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 Explorer9和更高版本，但是，jQuery 1.x支持Internet Explorer版本6和更高版本。

希望这能有所帮助！

Answer 2

您可以尝试使用JQuery运输http://ricostacruz.com/jquery.transit/的相反方法

它会将JQuery样式转换映射到CSS3转换，并使用适当的代码(如下所示)，如果CSS3转换不可用，则可以优雅地后退到标准JQuery。

JQuery运输使用一个简单的Javascript方法，transition()来执行每个操作。语法非常类似于JQuery动画()。

$('.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;