用于 CSS3 过渡的 JQuery 回退答案

【问题标题】：JQuery fallback for CSS3 transition用于 CSS3 过渡的 JQuery 回退
【发布时间】：2013-03-18 23:07:30
【问题描述】：

我正在为简单的 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>

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

【问题讨论】：

使用 CSS 过渡的美妙之处在于，如果不支持它，更改仍然会发生，只是没有动画效果。我会坚持下去..
@BillyMathews 是的，现在它在 IE 中闪烁，这还不错，但我想给每个人同样的体验，因为 35% 的人（我来自比利时）仍在使用 IE .
更不用说，在最新的浏览器中，CSS 总是比 JS 动画运行得更快。

标签： jquery css transition fallback

【解决方案1】：

我想你已经有了答案，你应该使用modernizr，它并不像你想象的那么复杂，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 之类的其他东西（这个不是垃圾邮件，我只是想帮忙）。

【讨论】：

如果你只需要检测过渡，你不妨扩展 $.support ......顺便提一下，fadeIn 应该对已经显示的元素产生什么影响？
好吧，我只是想展示 Modernizr 是如何工作的，我不确定动画是关于什么的，因此我不知道淡入淡出应该对已经显示的元素产生什么影响。
我知道 fadeIn 可能不是一个好主意，但是，我的观点是 Modernizr 的使用并不复杂。
我已经更新了我的答案，我的意思是解释 Modernizr 的工作原理，希望对您有所帮助。
@mechdeveloper 我想我几乎明白了，我的 JQuery 动画效果很好，它与 css3 完全相同，但问题是 Modernizr。我去下载页面并选择了“CSS 过渡”，生成了代码，然后我保存了那个 js 文件并将它放在我的中。我将 .icon 类更改为 .csstransitions .icon 并将 if 语句放在我的 div 下。它不起作用，有没有我忘记的东西？

【解决方案2】：

Transit 将 jQuery animate 调用转换为 CSS3 动画，并针对不受支持的浏览器回退到常规 js。

或者，您可以扩展 $.support 以检查转换 like this 并在测试失败时使用 jQuery animate。

【讨论】：

我认为你错了。如前所述，“Transit 通过简单地不进行转换（旋转、缩放等）而仍然在没有任何动画的情况下执行标准 CSS（不透明度、marginLeft 等）来降低旧版浏览器的性能。”所有的后备都必须自己编程。
@René "回退到基于帧的动画如果您想在不支持过渡时回退到经典动画，只需手动将 .transitition 重新定义为 .animate。"