使用modernizr检测CSS转换支持答案

【问题标题】：detecting css transition support with modernizr使用modernizr检测CSS转换支持
【发布时间】：2011-10-21 18:31:18
【问题描述】：

我将使用 css 转换和一个 jquery 插件作为不支持它的浏览器的后备。我想使用modernizr 来检测css 转换支持。为此加载整个库是矫枉过正的，我只想抓住我需要检测css转换的代码部分。在modernizr 的download page 中有很多让我感到困惑的选项和附加功能。我的问题是我应该选择哪些选项来有效地检测 css 转换？

<script type="text/javascript">
// modernizr
</script>


<script type="text/javascript">
    if(!Modernizr.csstransitions) { 
     // Use jquery if CSS transitions are not supported
    }
</script>

【问题讨论】：

如果您想动态地使用 css3 过渡支持和 jQuery 回退，请查看此article。

标签： jquery css css-transitions

【解决方案1】：

这是您需要的 Modernizr 库中的代码。它只有 1kb。

;window.Modernizr=function(a,b,c){function z(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+m.join(c+" ")+c).split(" ");return y(d,b)}function y(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function x(a,b){return!!~(""+a).indexOf(b)}function w(a,b){return typeof a===b}function v(a,b){return u(prefixes.join(a+";")+(b||""))}function u(a){j.cssText=a}var d="2.0.6",e={},f=b.documentElement,g=b.head||b.getElementsByTagName("head")[0],h="modernizr",i=b.createElement(h),j=i.style,k,l=Object.prototype.toString,m="Webkit Moz O ms Khtml".split(" "),n={},o={},p={},q=[],r,s={}.hasOwnProperty,t;!w(s,c)&&!w(s.call,c)?t=function(a,b){return s.call(a,b)}:t=function(a,b){return b in a&&w(a.constructor.prototype[b],c)},n.csstransitions=function(){return z("transitionProperty")};for(var A in n)t(n,A)&&(r=A.toLowerCase(),e[r]=n[A](),q.push((e[r]?"":"no-")+r));u(""),i=k=null,e._version=d,e._domPrefixes=m,e.testProp=function(a){return y([a])},e.testAllProps=z;return e}(this,this.document);

例如，您可以使用以下代码回退并为不支持 CSS3 过渡的浏览器提供 jQuery 驱动的动画：

if (!Modernizr.csstransitions) {
    $(document).ready(function(){
    $(".test").hover(function () {
        $(this).stop().animate({ color: "#F00" },700)
    }, function() {
        $(this).stop().animate({ color: "#AAA" },700)}
        );
    });
}

【讨论】：

【解决方案2】：

只需勾选 CSS 过渡框。它会自动勾选右下角的几个框，我会留下“添加 CSS 类”和“HTML5 Shim/IEPP”，因为它们都很轻量级，而且很有用。

【讨论】：

【解决方案3】：

CSS 事务不存在，我认为您正在寻找 CSS 过渡。它位于 CSS3 列的底部。

【讨论】：

你是对的。我的错。所以我只需要选择 CSS 过渡并将生成的代码包含在我的页面中？
是的，如果你只需要过渡。