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

transition-property mixin now includes support for multiple prefixed values.

Browse Source
This commit is contained in:
Richard Herrera 2012-02-26 11:39:30 -08:00
parent 388e3a611f
commit 9a40ba9ec3
1 changed files with 29 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,28 +32,42 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
@mixin transition-property($properties: $default-transition-property) {
@if type-of($properties) == string { $properties: unquote($properties); }
$raw-properties: -compass-space-list($properties);
$webkit-transition-property: false;
$moz-transition-property: false;
$ms-transition-property: false;
$o-transition-property: false;
@each $property in $raw-properties {
$match: false;
@each $prefixed-property in $transitionable-prefixed-properties {
@if $properties == $prefixed-property {
@if $property == $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}; }
transition-property: $properties;
$webkit-transition-property: array-push($webkit-transition-property, -webkit-#{$property}, true);
$moz-transition-property: array-push($moz-transition-property, -moz-#{$property}, true);
$ms-transition-property: array-push($ms-transition-property, -ms-#{$property}, true);
$o-transition-property: array-push($o-transition-property, -o-#{$property}, true);
} @else {
@include experimental(transition-property, $properties,
-moz, -webkit, -o, -ms, not -khtml, official
);
$webkit-transition-property: array-push($webkit-transition-property, $property, true);
$moz-transition-property: array-push($moz-transition-property, $property, true);
$ms-transition-property: array-push($ms-transition-property, $property, true);
$o-transition-property: array-push($o-transition-property, $property, true);
}
}
@if $experimental-support-for-webkit { -webkit-transition-property: $webkit-transition-property; }
@if $experimental-support-for-mozilla { -moz-transition-property: $moz-transition-property; }
@if $experimental-support-for-microsoft { -ms-transition-property: $ms-transition-property; }
@if $experimental-support-for-opera { -o-transition-property: $o-transition-property; }
transition-property: $properties;
}
// One or more durations in seconds
//
// * for multiple, use a comma-delimited list