【发布时间】:2014-06-07 11:50:45
【问题描述】:
我在 .less 中有这个 mixin:
.transition(@transition) {
transition: @transition;
-webkit-transition: @transition;
-moz-transition: @transition;
}
mixin 用于下一个 .less:
.animate-epg-now.ng-enter {
.transition(left @transition-duration @transition-type @transition-delay);
z-index: -1;
display: block !important;
left: -@transition-displacement;
}
编译出来的css是:
.go-mdl-epg-drct-main-epg .animate-epg-now.ng-enter {
transition: left 0.2s ease-out 0;
-webkit-transition: left 0.2s ease-out 0;
-moz-transition: left 0.2s ease-out 0;
z-index: -1;
display: block !important;
left: -400px;
}
在 Chrome、Safari、IE 中,它可以完美运行,但在 firefox 中,过渡线已被删除!在 firebug 中我看到源 css,这是 firefox 结果:
.go-mdl-epg-drct-main-epg .animate-epg-now.ng-enter {
display: block !important;
left: -400px;
z-index: -1;
}
我无法向我解释,可以肯定的是,在 Chrome 中我看到相同的 css 并且出现了转换语句,并且转换有效,为什么 firefox 会丢弃这些行?
【问题讨论】:
标签: javascript css firefox css-transitions