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

Comments

Projects
None yet
4 participants
@TonyBogdanov
Copy link

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

This comment has been minimized.

Copy link
Author

TonyBogdanov commented Oct 14, 2015

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

@fxck

This comment has been minimized.

Copy link

fxck commented Oct 29, 2015

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

@TonyBogdanov

This comment has been minimized.

Copy link
Author

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

This comment has been minimized.

Copy link

fxck commented Oct 29, 2015

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

@brianreavis

This comment has been minimized.

Copy link

brianreavis commented Nov 4, 2015

@jkeen

This comment has been minimized.

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 join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.