Skip to content
This repository was archived by the owner on Sep 13, 2024. It is now read-only.

Can't transition a transform #794

Closed
TonyBogdanov opened this issue Oct 14, 2015 · 6 comments
Closed

Can't transition a transform #794

TonyBogdanov opened this issue Oct 14, 2015 · 6 comments

Comments

@TonyBogdanov
Copy link

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
Copy link
Author

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

@fxck
Copy link

fxck commented Oct 29, 2015

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

@TonyBogdanov
Copy link
Author

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
Copy link

fxck commented Oct 29, 2015

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

@brianreavis
Copy link

Refs sass/node-sass#1227

@jkeen
Copy link

jkeen commented Nov 11, 2015

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. 👍

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants