diff --git a/frameworks/compass/stylesheets/compass/css3/_transition.scss b/frameworks/compass/stylesheets/compass/css3/_transition.scss index 2cab9fd5..ae98aae2 100644 --- a/frameworks/compass/stylesheets/compass/css3/_transition.scss +++ b/frameworks/compass/stylesheets/compass/css3/_transition.scss @@ -73,15 +73,42 @@ $default-transition-delay: false !default; // Transition all-in-one shorthand @mixin single-transition( - $properties: $default-transition-property, + $property: $default-transition-property, $duration: $default-transition-duration, $function: $default-transition-function, $delay: $default-transition-delay ) { - @include transition-property($properties); - @include transition-duration($duration); - @if $function { @include transition-timing-function($function); } - @if $delay { @include transition-delay($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, + not -ms, + not -khtml, + official + ); + } + @else { + @include experimental(transition, $property $duration $function, + -moz, + -webkit, + -o, + not -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); } + } } @mixin transition( diff --git a/test/fixtures/stylesheets/compass/css/transition.css b/test/fixtures/stylesheets/compass/css/transition.css new file mode 100644 index 00000000..5d38c42f --- /dev/null +++ b/test/fixtures/stylesheets/compass/css/transition.css @@ -0,0 +1,12 @@ +.single-transition-without-delay { + -moz-transition: all 0.6s ease-out; + -webkit-transition: all 0.6s ease-out; + -o-transition: all 0.6s ease-out; + transition: all 0.6s ease-out; } + +.single-transition-with-delay { + -webkit-transition: all 0.6s ease-out; + -webkit-transition-delay: 0.2s; + -moz-transition: all 0.6s ease-out 0.2s; + -o-transition: all 0.6s ease-out 0.2s; + transition: all 0.6s ease-out 0.2s; } diff --git a/test/fixtures/stylesheets/compass/sass/transition.scss b/test/fixtures/stylesheets/compass/sass/transition.scss new file mode 100644 index 00000000..8cee1166 --- /dev/null +++ b/test/fixtures/stylesheets/compass/sass/transition.scss @@ -0,0 +1,4 @@ +@import "compass/css3/transition"; + +.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); }