Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

@TonyBogdanov TonyBogdanov commented Oct 14, 2015

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

@TonyBogdanov TonyBogdanov commented Oct 14, 2015

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

@fxck
Copy link

@fxck fxck commented Oct 29, 2015

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

@TonyBogdanov
Copy link
Author

@TonyBogdanov TonyBogdanov commented Oct 29, 2015

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 fxck commented Oct 29, 2015

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

@brianreavis
Copy link

@brianreavis brianreavis commented Nov 4, 2015

@jkeen
Copy link

@jkeen 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 join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants