Merge pull request #728 from doctyper/prefixed-transition-properties

Adding support for prefixed transition properties

frameworks/compass/stylesheets/compass/css3/_transition.scss

@@ -23,15 +23,16 @@ $default-transition-function: false !default;
 
 $default-transition-delay: false !default;
 
+$transitionable-prefixed-values: transform, transform-origin !default;
+
 // One or more properties to transition
 //
 // * for multiple, use a comma-delimited list
 // * also accepts "all" or "none"
 
 @mixin transition-property($properties: $default-transition-property) {
-  @include experimental(transition-property, unquote($properties),
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @if type-of($properties) == string { $properties: unquote($properties); }
+  @include build-prefix-values(transition-property, $properties);
 }
 
 // One or more durations in seconds
@@ -78,37 +79,7 @@ $default-transition-delay: false !default;
   $function: $default-transition-function,
   $delay: $default-transition-delay
 ) {
-  @if $property and $duration and $function {
-    // Shorthand (see https://github.com/chriseppstein/compass/issues/585)
-    @if $delay {
-      -webkit-transition: $property $duration $function;
-      -webkit-transition-delay: $delay;
-      @include experimental(transition, $property $duration $function $delay,
-        -moz,
-        not -webkit,
-        -o,
-        -ms,
-        not -khtml,
-        official
-      );
-    }
-    @else {
-      @include experimental(transition, $property $duration $function,
-        -moz,
-        -webkit,
-        -o,
-        -ms,
-        not -khtml,
-        official
-      );
-    }
-  }
-  @else {
-    @include transition-property($property);
-    @include transition-duration($duration);
-    @if $function { @include transition-timing-function($function); }
-    @if $delay { @include transition-delay($delay); }
-  }
+  @include build-prefix-values(transition, compact($property $duration $function, false), $delay);
 }
 
 @mixin transition(
@@ -124,10 +95,60 @@ $default-transition-delay: false !default;
   $transition-10: false
 ) {
   @if $transition-1 == default {
-    $transition-1 : -compass-space-list(compact($default-transition-property, $default-transition-duration, $default-transition-function, $default-transition-delay));
+    $transition-1 : (compact($default-transition-property, $default-transition-duration, $default-transition-function, $default-transition-delay));
   }
+
   $transition : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10);
-  @include experimental(transition, $transition,
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @include build-prefix-values(transition, $transition);
+}
+
+@mixin build-prefix-values($property, $values, $delay: false) {
+  $raw-values: ($values);
+  $index: compact(false);
+
+  $webkit-value: compact(false);
+  $moz-value: compact(false);
+  $ms-value: compact(false);
+  $o-value: compact(false);
+
+  @each $value in $raw-values {
+    $value: compact(join($value, false));
+    $match: false;
+
+    @each $prefixed-value in $transitionable-prefixed-values {
+      @if index($value, $prefixed-value) {
+        $index: index($value, $prefixed-value);
+        $match: true;
+      }
+    }
+
+    @if $match {
+      $value-prefix: nth($value, $index);
+      $value-suffix: compact(false);
+
+      @for $i from 2 through length($value) {
+        $value-suffix: append($value-suffix, nth($value, $i), space);
+      }
+
+      $non-webkit-suffix: compact(append($value-suffix, $delay, space));
+
+      $webkit-value: append($webkit-value, compact(join(-webkit-#{$value-prefix}, $value-suffix)), comma);
+      $moz-value: append($moz-value, compact(join(-moz-#{$value-prefix}, $non-webkit-suffix)), comma);
+      $ms-value: append($ms-value, compact(join(-ms-#{$value-prefix}, $non-webkit-suffix)), comma);
+      $o-value: append($o-value, compact(join(-o-#{$value-prefix}, $non-webkit-suffix)), comma);
+    } @else {
+      $non-webkit-value: compact(append($value, $delay, space));
+
+      $webkit-value: append($webkit-value, $value, comma);
+      $moz-value: append($moz-value, $non-webkit-value, comma);
+      $ms-value: append($ms-value, $non-webkit-value, comma);
+      $o-value: append($o-value, $non-webkit-value, comma);
+    }
+  }
+
+  @if $experimental-support-for-webkit    { -webkit-#{$property} : $webkit-value; @if $delay { -webkit-#{$property}-delay : $delay; } }
+  @if $experimental-support-for-mozilla   {    -moz-#{$property} :    $moz-value; }
+  @if $experimental-support-for-microsoft {     -ms-#{$property} :     $ms-value; }
+  @if $experimental-support-for-opera     {      -o-#{$property} :      $o-value; }
+                                                    #{$property} :      compact($values $delay);
 }

test/fixtures/stylesheets/compass/css/transition.css

@@ -26,3 +26,46 @@
   -ms-transition-duration: 0.2s, 0.5s, 0.2s;
   -o-transition-duration: 0.2s, 0.5s, 0.2s;
   transition-duration: 0.2s, 0.5s, 0.2s; }
+
+.single-transform-transition-without-delay {
+  -webkit-transition: -webkit-transform 0.6s ease-out;
+  -moz-transition: -moz-transform 0.6s ease-out;
+  -ms-transition: -ms-transform 0.6s ease-out;
+  -o-transition: -o-transform 0.6s ease-out;
+  transition: transform 0.6s ease-out; }
+
+.single-transform-transition-with-delay {
+  -webkit-transition: -webkit-transform 0.6s ease-out;
+  -webkit-transition-delay: 0.2s;
+  -moz-transition: -moz-transform 0.6s ease-out 0.2s;
+  -ms-transition: -ms-transform 0.6s ease-out 0.2s;
+  -o-transition: -o-transform 0.6s ease-out 0.2s;
+  transition: transform 0.6s ease-out 0.2s; }
+
+.transform-transition {
+  -webkit-transition: -webkit-transform 0.6s ease-out;
+  -moz-transition: -moz-transform 0.6s ease-out;
+  -ms-transition: -ms-transform 0.6s ease-out;
+  -o-transition: -o-transform 0.6s ease-out;
+  transition: transform 0.6s ease-out; }
+
+.multiple-transitions {
+  -webkit-transition: -webkit-transform 0.6s ease-out, opacity 0.2s ease-in;
+  -moz-transition: -moz-transform 0.6s ease-out, opacity 0.2s ease-in;
+  -ms-transition: -ms-transform 0.6s ease-out, opacity 0.2s ease-in;
+  -o-transition: -o-transform 0.6s ease-out, opacity 0.2s ease-in;
+  transition: transform 0.6s ease-out, opacity 0.2s ease-in; }
+
+.transition-property {
+  -webkit-transition-property: -webkit-transform;
+  -moz-transition-property: -moz-transform;
+  -ms-transition-property: -ms-transform;
+  -o-transition-property: -o-transform;
+  transition-property: transform; }
+
+.multiple-transition-properties {
+  -webkit-transition-property: opacity, -webkit-transform, left;
+  -moz-transition-property: opacity, -moz-transform, left;
+  -ms-transition-property: opacity, -ms-transform, left;
+  -o-transition-property: opacity, -o-transform, left;
+  transition-property: opacity, transform, left; }

test/fixtures/stylesheets/compass/sass/transition.scss

@@ -4,3 +4,9 @@
 .single-transition-with-delay     { @include single-transition(all, 0.6s, ease-out, 0.2s); }
 .transition-duration-string { @include transition-duration("0.2s, 0.5s, 0.2s"); }
 .transition-duration-list { @include transition-duration((0.2s, 0.5s, 0.2s)); }
+.single-transform-transition-without-delay  { @include single-transition(transform, 0.6s, ease-out); }
+.single-transform-transition-with-delay     { @include single-transition(transform, 0.6s, ease-out, 0.2s); }
+.transform-transition { @include transition(transform 0.6s ease-out) }
+.multiple-transitions { @include transition(transform 0.6s ease-out, opacity 0.2s ease-in) }
+.transition-property { @include transition-property(transform); }
+.multiple-transition-properties { @include transition-property((opacity, transform, left)); }