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

我想测试浏览器是否支持关键帧。所以我找到了this。如何测试是否支持关键帧或不使用Modernizr？

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

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

来源

2014-03-25 Navin Rauniyar

Modernizr是用于特征检测一个JavaScript库。你可以在这里找到它：http://modernizr.com/

有几个指南可以帮助你入门。但基本上，一旦你下载了文件，你可以将该测试添加到if的底部。然后，当脚本加载时，它会向文档的<html>添加一个css类，例如<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 
}

我希望这有助于。

UPDATE

这里是工作提琴向您展示如何使用它： http://jsfiddle.net/wf_4/hYNy8/

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

来源

2014-03-25 10:27:23 wf4

请记住，'html.keyframes .className'是一个潜在的昂贵的选择器，因为它必须检查所有祖先的标签名称和类名称。使用'document.documentElement.classList.contains（'keyframes'）'（或者其旧版浏览器的兼容性shim）可能会更有效率，尤其是如果你会使用这个。对于希望代码尽可能实时以确保动画顺畅的动画尤其如此。 –

“兼容性shim”我的意思是像'document.documentElement.className。匹配（/ \ bkeyframes \ b /）' –

感谢@NiettheDarkAbsol，我可能需要回顾一下我最近的工作:-) – wf4

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

回答

相关问题