我在这个项目中使用 Sass 3.2.9、Compass 0.13.alpha.4 和 Susy 1.0.9。
这是scss:
.callout-image-wrap {
@include single-transition(border-color, .5s, ease-in-out, 0);
@include rem(border-bottom, 5px solid $mxn-light-blue);
&:hover { border-bottom-color : $mxn-dark-blue; }
}
这是生成的css:
.callout-image-wrap {
-webkit-transition: border-color 0.5s ease-in-out;
-webkit-transition-delay: 0;
-moz-transition: border-color 0.5s ease-in-out 0;
-o-transition: border-color 0.5s ease-in-out 0;
transition: border-color 0.5s ease-in-out 0;
border-bottom: 5px solid #0099ff;
border-bottom: 0.3125rem solid #0099ff; }
.callout-image-wrap:hover {
border-bottom-color: #003399; }
看起来FF甚至没有接受过渡。然而,它在 Chrome 中运行良好。 Mozilla 前缀转换的方式有变化吗?或者也许是 compass 如何生成它们?还是我写错了?
我也试过这样做:
@include transition(border-color .5s ease-in-out 0);
我在过去的项目中使用过这个 mixin 没有问题,所以我对这个很困惑。
最佳答案
事实证明,Firefox 不会只接受 0 的延迟时间,它必须不存在或具有“s”或“ms”。
我只会看看自己。
关于firefox - compass 单转换 mixin 在 Firefox 22 中不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17930447/