如何让Zurb foundation @include single-transition与IE 9协同工作

Question

我已经使用foundation创建了一个自定义按钮。我使用@include single-transition；来制作悬停动画。但它不适用于IE9。如何让它与IE9一起工作。

.btn-t {
  color: #fff;
  display: inline-block;
  padding: emCalc(16px);
  border-radius: 6px;
  background: rgba($primary-color, 0.9);
  @include single-transition;
}
.btn-t:hover {
  background: darken($primary-color, 20%);
}

Answer 1

在IE9：http://caniuse.com/#search=transition中不支持转换

这里我复制了@Barney的answer：

如果您事先知道需要嗅探哪些浏览器供应商前缀，则可以检测受支持的CSS属性。我为这个机制写了一个要点：

https://gist.github.com/1096784

cssSandpaper是一个JS库，旨在解析CSS并为各种CSS3效果动态实现polyfills：

http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

还有一个以相反顺序运行的jQuery库，当您调用$.animate()时，它会在可能的情况下静默实现转换：

https://github.com/louisremi/jquery.transition.js