Merge pull request #593 from davidchambers/master
Use `transition` shorthand if appropriate
This commit is contained in:
commit
616af1c139
@ -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(
|
||||||
|
12
test/fixtures/stylesheets/compass/css/transition.css
vendored
Normal file
12
test/fixtures/stylesheets/compass/css/transition.css
vendored
Normal 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; }
|
4
test/fixtures/stylesheets/compass/sass/transition.scss
vendored
Normal file
4
test/fixtures/stylesheets/compass/sass/transition.scss
vendored
Normal 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); }
|
Loading…
Reference in New Issue
Block a user