Question

我想测试浏览器是否支持关键帧。所以我找到了this。

但我真的很困惑如何使用？

Modernizr.addTest("keyframes", function(){
    //your test code without adding a support class || this will be done by Modernizr
    return [boolean]; // return true if it is supported or false if it is not supported
});
if(Modernizr.addTest()){
    alert('supports');
}

我像这样使用它，但它在所有浏览器中添加了类：

Modernizr.addTest("keyframe", Modernizr.testAllProps('animationName'));
    if($("html").hasClass('no-keyframe')){
        alert('test');
    }

Answer 1

Modernizr是一个用于特征检测的JavaScript库。您可以在此处找到它：http://modernizr.com/

有几个指南可以帮助您入门。但基本上，一旦下载了文件，就可以将该测试添加到if的底部。然后，当加载脚本时，它会将css类添加到文档的<html>，例如<html class="keyframes">或<html class="no-keyframes">。

那么，下一步是如何使用这个？好吧，你链接你的选择器，例如，你可以使用这个jQuery选择器：

$("html.keyframes className").on(....)

这表示此事件仅在className的后代html.keyframes时触发。

以类似的方式，如果您只想在关键帧不可用时调用某些内容，您可以这样做：

$("html.no-keyframes className").on(....)

或者你可以使用类似的东西：

if($('html').hasClass('keyframes')) 
{
//do something only if keyframes is supported
}
else
{
//do something different if its not
}

我希望这会有所帮助。

<强>更新

这是一个工作小提示，向您展示如何使用它： http://jsfiddle.net/wf_4/hYNy8/

我已将CDN的URL包含在＆＃34;外部资源＆＃34;中，并且我添加了关键帧的测试。然后我使用jquery从class标记中读取html值并将它们插入到页面中，以便您可以看到它们。我要补充的是，通过使用FULL库，您将在每个页面加载时执行所有这些测试。我所做的是为我所需的测试创建库的自定义构建。

如何使用Modernizr测试是否支持关键帧？

1 个答案: