Question

我正在寻找一个简单的CSS3转换代码的JQuery / JS回退。我的javascript非常基本，所以我找到并编写替换代码并不容易。我已经检查过modernizr，但我并不是很了解很多文档。

这是一个在悬停时使用transform: rotate(20deg)的图标（这不是IE中支持的问题）。但问题是过渡，我正在使用

  .icon{
....other css code
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}

这是否有JQuery后备？我在考虑fadeIn();，但我不知道如何对此进行编码。这样的事情？：

<script>$(icon).hover(function (){$(icon).fadeIn("slow");}); </script>

如何让浏览器知道它是一个后备，以便他们只选择JQuery，如果它是IE？

Answer 1

我认为你已经有了答案，你应该使用modernizr，它并不像你想象的那么复杂，有两种方式，现代化指定哪些是可用的功能，哪些不是，第一种是通过一组CSS HTML元素中的类：

<html class="js no-flexbox canvas canvastext postmessage no-websqldatabase ... ">

如果它可用，它将显示名称，如果它不可用，它将显示带有“no-”前缀的名称，如“no-flexbox”，第二个是通过javascript：

if(!Modernizr.csstransitions)

Modernizr有一组布尔变量可以告诉你它是否可用，所以如果你想为你的动画设置一个后备，我建议你使用Modernizr类来为浏览器指定动画。有这个功能：

.csstransitions #element{
-webkit-transition: ... ;
-moz-transition: ... ;
-o-transition: ... ;
-ms-transition: ... ;
transition: ... ;
}

然后使用modernizr检查的变量创建一个javascript文件，如果该功能可用，如果不可用则指定动画：

if(!Modernizr.csstransitions)
    $("#element").hover(function(){ $(this).animate({ ... your animation ... }, 5000); });

这可能会让你知道Modernizr是如何工作的（我希望），无论如何，如果你遇到问题，你可以检查一下blog post我很久以前做过的，它用CSS3PIE之类的东西说了这样的话（这不是垃圾邮件，我只是想帮忙）。

Answer 2

Transit转换jQuery动画调用CSS3动画，然后回退到不支持的浏览器的常规js。

或者，您可以扩展$ .support以检查转换like this，并在对它们进行测试失败时使用jQuery动画。

CSS3过渡的JQuery后备

2 个答案: