Can't transition a transform

[TonyBogdanov]

I believe this has come up before, but I couldn't find a solution so far.

The following Sass:

.test1 {
  @include transition(opacity width 1s ease 2s, height 1s ease 2s);
}
.test2 {
  @include transition(transform width 1s ease 2s);
}
.test3 {
  @include transition(transform width 1s ease 2s, height 1s ease 2s);
}

Produces the following CSS:

.test1 {
  -webkit-transition: opacity width 1s ease 2s, height 1s ease 2s;
  -moz-transition: opacity width 1s ease 2s, height 1s ease 2s;
  transition: opacity width 1s ease 2s, height 1s ease 2s; }

.test2 {
  -webkit-transition: -webkit-transform;
  -moz-transition: -moz-transform;
  transition: transform; }

.test3 {
  -webkit-transition: -webkit-transform, height;
  -moz-transition: -moz-transform, height;
  transition: transform, height; }

I believe you can already see my issue, none of the options except the property names get through when there is a "transform" present.

I'm using libSass on Windows 10 if it matters.

Thanks in advance!

[TonyBogdanov]

Well it turned out to be a LibSass issue, sorry about that :)

[fxck]

what version of libsass do you use? I've got the same problem..

[TonyBogdanov]

I'm using sass2scss 1.0.3 compiled with Visual Studio under Windows 10.

I still have no idea what's the problem, but I do know it's caused by libsass, because the same code compiles just fine using the nodejs version.

I've ended up writing a custom mixin overriding the original one, that seems to compile and pretty much works just fine for me. Here it is:

@mixin trans-prefix($value, $prefix: "") {
  $slice: str-slice(inspect($value), 0, 9);
  @if $slice == "transform" {
    #{$prefix}transition: #{$prefix}#{$value};
  } @else {
    #{$prefix}transition: $value;
  }
}
@mixin transition($properties...) {
  @if length($properties) > 1 {
    $spec:              ();
    @for $i from 1 through length($properties) {
      $spec:            append($spec, nth($properties, $i), comma);
    }
  } @else {
    $spec:              $properties;
  }
  @include trans-prefix($spec, -webkit-);
  @include trans-prefix($spec, -moz-);
  @include trans-prefix($spec);
}

[fxck]

Man, finding a working transition mixin is pretty damn hard. Thanks for this one, works perfectly.

[brianreavis]

Refs sass/node-sass#1227

[jkeen]

Thanks @TonyBogdanov! Spent way long searching for what I suspected was a version difference between production and dev. Never found the issue, but that mixin works like a charm. 👍