How to use the compass transition mixins with a translateX property and autoprefixer?

Question

Problem: Compass and my sass varible $property isn't working properly and I dont want to use $property: all.

Question:

How do I set the property value so that my compass mixin will properly transition the $property: translateX?

notes: I have a grunt watch preforming compass and auto-prefixer on save with livereload

CSS:

.wa-carousel-animator {
$duration: 1s;
$property: translateX;
$function: ease-out;
$delay-on: 1s;
$delay-off: 0s;

@include single-transition($property, $duration, $function, $delay-off);
&.on-menu {
    @include single-transition($property, $duration, $function, $delay-on);
    @include breakpoint($baby){
        @include translateX(90%)
    }
    @include breakpoint($mobile){
        @include translateX(40%)
    }
    @include breakpoint($tablet){
        @include translateX(40%)
    }
    @include breakpoint($desktop){
        @include translateX(25%)
    }

}
}

Answer 1

If you're using autoprefixer, you don't need to use Compass's built-in transition mixins (since all they really do is apply browser prefixes). You're also having issues because translateX isn't the property - transform is, and translateX is a value of that property.

You can keep the transition details as a variable, but unless you need the different parts of it kept separate for use elsewhere, might as well save yourself some complexity and just combine them:

$transition-default: transform 1s ease-out 1s;

transition: $transition-default;

  &.on-menu {
    transition-delay: 0s;

     @include breakpoint($baby) {
        transform: translateX(90%);
    }
  ....

and so on. Autoprefixer will take care of all the browser prefixing that you're trying to use Compass for.