jQuery 过渡还是 CSS？答案

【问题标题】：jQuery transitions or CSS?jQuery 过渡还是 CSS？
【发布时间】：2015-12-10 10:30:55
【问题描述】：

我应该使用 CSS 过渡还是 jQuery？

我看到一些 jQuery 插件同时使用 jQuery，仅在浏览器不支持 CSS 转换时使用。

这是怎么做到的？

【问题讨论】：

你不应该做用户代理嗅探，请看我的回答

标签： jquery css jquery-animate css-transitions

【解决方案1】：

Never ever use User Agent sniffing，而是使用功能支持/检测。这就是上帝给我们Modernizr的原因。

Modernizr 将 CSS 类添加到您的 html 中，具体取决于查看浏览器支持的技术。然后，您可以在 CSS 中编写：

.csstransitions #myelement { /* do css3 stuff */ }

在 jQuery 中：

if (!$('html').hasClass('csstransitions')) { /* jQuery fallback */ }

【讨论】：

【解决方案2】：

如果您非常确定您的用户将使用最新版本的 chrome 或 Mozilla 或任何其他版本（IE 不包括在内），那么 CSS 也可以被视为一个选项。否则你也可以使用JQuery 的用户版本，它也支持 IE。最好的组合是将两者用于网站将产生更好的结果。

【讨论】：

【解决方案3】：

您可以使用 JQuery 进行 JQuery 转换和 CSS 转换。

您可以在用户的浏览器上运行检查并执行类似的操作

var thing = $('#something');
var browserIsIE = function() {
    return false;
}

if ( browserIsIE() ) {
    thing.fadeOut();
}
else {
    thing.addClass('hidden');
}

CSS：

#something{
   transition: opacity 0.4s;
}

.hidden {
    opacity: none;
}

请注意，此代码实际上并不检查浏览器版本，但它处理如何淡化元素，您应该创建一个函数来检查您需要检查的任何内容！

【讨论】：

【解决方案4】：

插件可能正在检查浏览器版本。 Take a look here 了解支持 CSS 过渡的浏览器的概述。

【讨论】：