3

このプロジェクトでは、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 がトランジションにプレフィックスを付ける方法に変更はありましたか? それとも、コンパスがそれらを生成する方法でしょうか? それとも私の書き方が悪いのでしょうか？

私もやってみました：

@include transition(border-color .5s ease-in-out 0);

過去のプロジェクトでこの mixin を問題なく使用してきたので、これにはかなり困惑しています。

4

1 に答える 1

8

Firefox は遅延時間に 0 だけを受け入れないことがわかりました。0 が存在しないか、's' または 'ms' が含まれている必要があります。

私は自分自身を見ていきます。

于 2013-07-29T21:31:38.520 に答える