Merge pull request #593 from davidchambers/master

Use `transition` shorthand if appropriate
This commit is contained in:
Scott Davis 2011-10-11 17:45:41 -07:00
commit 616af1c139
3 changed files with 48 additions and 5 deletions

View File

@ -73,15 +73,42 @@ $default-transition-delay: false !default;
// Transition all-in-one shorthand // Transition all-in-one shorthand
@mixin single-transition( @mixin single-transition(
$properties: $default-transition-property, $property: $default-transition-property,
$duration: $default-transition-duration, $duration: $default-transition-duration,
$function: $default-transition-function, $function: $default-transition-function,
$delay: $default-transition-delay $delay: $default-transition-delay
) { ) {
@include transition-property($properties); @if $property and $duration and $function {
@include transition-duration($duration); // Shorthand (see https://github.com/chriseppstein/compass/issues/585)
@if $function { @include transition-timing-function($function); } @if $delay {
@if $delay { @include transition-delay($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( @mixin transition(

View File

@ -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; }

View File

@ -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); }