github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated with the following:

Browse Source 
- Added stylesheet tests for prefixed transition properties.
- transition-property mixin now passes all tests.
- single-transition mixin now passes all tests.
- Updated rewrite to respect user specified browser support.
This commit is contained in:
Richard Herrera 2012-02-26 00:55:52 -08:00
parent cf60a90931
commit 6a3d024cc1
3 changed files with 99 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
frameworks/compass/stylesheets/compass/css3/_transition.scss
View File

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

22
test/fixtures/stylesheets/compass/css/transition.css vendored
View File

@ -26,3 +26,25 @@
-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; }
.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; }

3
test/fixtures/stylesheets/compass/sass/transition.scss vendored
View File

@ -4,3 +4,6 @@
.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)); }
.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); }