使用 Modernizr 填充 CSS 过渡答案

【问题标题】：Using Modernizr to Polyfill CSS transitions使用 Modernizr 填充 CSS 过渡
【发布时间】：2012-08-14 01:55:43
【问题描述】：

我已将modernizr js 作为HTML5 Boilerplate 的一部分安装，但我不知道如何使用它。我创建了一个带有一些过渡的 CSS3 导航。我知道 IE 不支持它们，但据我了解，Modernizr 可以使用 js 填充。是对的吗？我怎么做？我不太懂js。

【问题讨论】：

如果你对 js 了解不多，如你所说，那么你评估 Modernizr 中或 Addy Osmani 提出的解决方案的依据是什么？我知道这并不能帮助您解决当前的问题，但是网络上的一个（更大）问题是大量潜在的专家和博主急于提供帮助但没有提供最好的建议。如果可能的话，让您的应用程序可以降级以在没有过渡的情况下正常工作。
我不知道 Addy Odmani 是谁。基本上，我只是在应付它并边走边学。没有过渡它工作正常。它只是不那么漂亮。当 css 转换不起作用时，我希望有一个 js 解决方案让它更漂亮。
当然，有可能。好的解决方案并不容易，而糟糕的解决方案则非常复杂——比如 Modernizr、jQuery 和其他博客。

【解决方案1】：

Modernizr 不为 CSS3 功能提供任何 polyfill。它确实提供了一个简单的 polyfill 以在旧浏览器中启用 HTML5 元素的样式。除此之外，它主要用作通过将类名添加到页面的 html 标记来检测特征的一种方式。

所以在你的 CSS 中，你可以做类似的事情

.borderradius .mydiv {
    border-radius: 8px;
}

如果您的浏览器支持，Modernizer 会将 .borderradius 类名添加到页面的 html 标记中……或者您可以在 js 中使用它来选择性地回退到插件等。

【讨论】：

【解决方案2】：

您需要添加 yepnope 脚本来检查是否支持 css3 转换。比如这样：

yepnope({
  test : Modernizr.transition,
  yep  : '',
  nope : ['polyfillfortransition.js']
});

更新

实际上，如果您使用 jQuery，则有一个插件可以做到这一点。您不需要执行上面的代码。 Addy Osmani 的这篇文章将更好地解释它http://addyosmani.com/blog/css3transitions-jquery/。在那篇文章中，他还解释了 yepnope 的用法。

【讨论】：

我把这个放在哪里？我对此真的很陌生。我把它放在 HTML 中的一些<script> 标记之间，就在我放置modernizr 脚本的地方，但什么也没发生。这是我的网站`http://dev.newfrequency.com/index.html，如果它对你有帮助的话。
好吧，我的错...polyfillfortransition.js 实际上是一个示例，您需要先获取实际的 js，然后再使用它。但是让我解释一下代码。所以yepnope 是modernizr 附带的测试。它将测试您的浏览器是否支持 css 转换。如果不是，你需要调用一个 JS 来为你做 polyfill。您需要将该代码放入您的 js 中，我建议您将其放在代码末尾，然后关闭 body 标签。