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,16 +73,43 @@ $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);
@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(
$transition-1 : default,

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