Javascript 如何使用Modernizer测试关键帧是否受支持？

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

但我真的很困惑怎么用

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');
    }

---

modernizer

是一个用于功能检测的javascript库。你可以在这里找到它：

有几个指南可以帮助您入门。但基本上，一旦下载了该文件，就可以将该测试添加到if的底部。然后，当加载脚本时，它会将css类添加到文档的

，例如

或

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

$（“html.keyframes className”）。在（..）上

这意味着此事件仅在
className
是
html.keyframes
的后代时才会触发

以类似的方式，如果只想在关键帧不可用时调用某个对象，可以执行以下操作：

$（“html.no-keyframes className”）。在（..）上


或者，您可以使用以下内容：

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

我希望这有帮助

更新

下面是一把小提琴，向您展示如何使用它：

我已经在“外部资源”中包含了CDN的URL，并且添加了关键帧测试。
然后，我使用jquery从
html
标记中读取
class
值，并将它们插入页面中，以便您可以看到它们。
我要补充的是，通过使用完整的库，您将在每次加载页面时执行所有这些测试。我所做的是为我需要的测试创建库的自定义构建
 请记住，
html.keyframes.className
是一个潜在的昂贵选择器，因为它必须检查所有祖先的标记名和类名。使用
document.documentElement.classList.contains（'keyframes'）
（或旧浏览器的兼容垫片）可能会更有效，尤其是如果您经常使用它的话。对于希望代码尽可能实时以确保平滑动画的动画来说尤其如此。我所说的“兼容性”指的是类似于
document.documentElement.className.match（/\bkeyframes\b/）
谢谢@NiettheDarkAbsol，我可能需要回顾一下我最近的一些工作：-）@wf4我把这联系起来了好吗？-咯咯笑-我花了几个小时从代码中挤出效率-不是微优化，而是。。。宏观优化。各种页面速度测试已经成为我的游戏，比如和我的（在最后一个测试中，有人知道如何告诉PageSpeed移动站点应该在横向视图中查看吗？）