diff --git a/frameworks/compass/stylesheets/compass/css3/_transition.scss b/frameworks/compass/stylesheets/compass/css3/_transition.scss index d2ee7bb2..f220d512 100644 --- a/frameworks/compass/stylesheets/compass/css3/_transition.scss +++ b/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); } diff --git a/test/fixtures/stylesheets/compass/css/transition.css b/test/fixtures/stylesheets/compass/css/transition.css index 1d34c025..b9b21aea 100644 --- a/test/fixtures/stylesheets/compass/css/transition.css +++ b/test/fixtures/stylesheets/compass/css/transition.css @@ -25,4 +25,47 @@ -moz-transition-duration: 0.2s, 0.5s, 0.2s; -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; } \ No newline at end of file + 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; } diff --git a/test/fixtures/stylesheets/compass/sass/transition.scss b/test/fixtures/stylesheets/compass/sass/transition.scss index 9fa9edde..16add41a 100644 --- a/test/fixtures/stylesheets/compass/sass/transition.scss +++ b/test/fixtures/stylesheets/compass/sass/transition.scss @@ -3,4 +3,10 @@ .single-transition-without-delay { @include single-transition(all, 0.6s, ease-out); } .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)); } \ No newline at end of file +.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)); }