diff --git a/frameworks/compass/stylesheets/compass/css3/_transition.scss b/frameworks/compass/stylesheets/compass/css3/_transition.scss index ee2cec54..c092e43c 100644 --- a/frameworks/compass/stylesheets/compass/css3/_transition.scss +++ b/frameworks/compass/stylesheets/compass/css3/_transition.scss @@ -31,7 +31,29 @@ $transitionable-prefixed-properties: transform, transform-origin !default; // * also accepts "all" or "none" @mixin transition-property($properties: $default-transition-property) { - @include prefix-friendly-transition(unquote($properties)); + @if type-of($properties) == string { $properties: unquote($properties); } + + $match: false; + + @each $prefixed-property in $transitionable-prefixed-properties { + @if $properties == $prefixed-property { + $match: true; + } + } + + @if $match { + @if $experimental-support-for-webkit { -webkit-transition-property: -webkit-#{$properties}; } + @if $experimental-support-for-mozilla { -moz-transition-property: -moz-#{$properties}; } + @if $experimental-support-for-microsoft { -ms-transition-property: -ms-#{$properties}; } + @if $experimental-support-for-opera { -o-transition-property: -o-#{$properties}; } + @include experimental(transition-property, $properties, + not -moz, not -webkit, not -o, not -ms, not -khtml, official + ); + } @else { + @include experimental(transition-property, $properties, + -moz, -webkit, -o, -ms, not -khtml, official + ); + } } // One or more durations in seconds @@ -78,29 +100,56 @@ $transitionable-prefixed-properties: transform, transform-origin !default; $function: $default-transition-function, $delay: $default-transition-delay ) { + $match: false; + + @each $prefixed-property in $transitionable-prefixed-properties { + @if $property == $prefixed-property { + $match: true; + } + } + @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 - ); + @if $match { + @if $experimental-support-for-webkit { -webkit-transition: -webkit-#{$property} $duration $function; -webkit-transition-delay: $delay; } + @if $experimental-support-for-mozilla { -moz-transition: -moz-#{$property} $duration $function $delay; } + @if $experimental-support-for-microsoft { -ms-transition: -ms-#{$property} $duration $function $delay; } + @if $experimental-support-for-opera { -o-transition: -o-#{$property} $duration $function $delay; } + @include experimental(transition, $property $duration $function $delay, + not -moz, not -webkit, not -o, not -ms, not -khtml, official + ); + } @else { + @if $experimental-support-for-webkit { -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 - ); + @if $match { + @if $experimental-support-for-webkit { -webkit-transition: -webkit-#{$property} $duration $function; } + @if $experimental-support-for-mozilla { -moz-transition: -moz-#{$property} $duration $function; } + @if $experimental-support-for-microsoft { -ms-transition: -ms-#{$property} $duration $function; } + @if $experimental-support-for-opera { -o-transition: -o-#{$property} $duration $function; } + @include experimental(transition, $property $duration $function, + not -moz, not -webkit, not -o, not -ms, not -khtml, official + ); + } @else { + @include experimental(transition, $property $duration $function, + -moz, + -webkit, + -o, + -ms, + not -khtml, + official + ); + } } } @else { @@ -198,10 +247,10 @@ $transitionable-prefixed-properties: transform, transform-origin !default; } } - -webkit-transition: $webkit-transition; - -moz-transition: $moz-transition; - -ms-transition: $ms-transition; - -o-transition: $o-transition; + @if $experimental-support-for-webkit { -webkit-transition: $webkit-transition; } + @if $experimental-support-for-mozilla { -moz-transition: $moz-transition; } + @if $experimental-support-for-microsoft { -ms-transition: $ms-transition; } + @if $experimental-support-for-opera { -o-transition: $o-transition; } @include experimental(transition, $transition, not -moz, not -webkit, not -o, not -ms, not -khtml, official diff --git a/test/fixtures/stylesheets/compass/css/transition.css b/test/fixtures/stylesheets/compass/css/transition.css index 1d34c025..c7c939b1 100644 --- a/test/fixtures/stylesheets/compass/css/transition.css +++ b/test/fixtures/stylesheets/compass/css/transition.css @@ -25,4 +25,26 @@ -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; } + +.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; } diff --git a/test/fixtures/stylesheets/compass/sass/transition.scss b/test/fixtures/stylesheets/compass/sass/transition.scss index 9fa9edde..706ef113 100644 --- a/test/fixtures/stylesheets/compass/sass/transition.scss +++ b/test/fixtures/stylesheets/compass/sass/transition.scss @@ -3,4 +3,7 @@ .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); } +.transition-property { @include transition-property(transform); }