Merge pull request #728 from doctyper/prefixed-transition-properties

Adding support for prefixed transition properties
This commit is contained in:
Chris Eppstein 2012-03-11 18:04:16 -07:00
commit 06ac18ec9d
3 changed files with 110 additions and 40 deletions

View File

@ -23,15 +23,16 @@ $default-transition-function: false !default;
$default-transition-delay: false !default;
$transitionable-prefixed-values: transform, transform-origin !default;
// One or more properties to transition
//
// * for multiple, use a comma-delimited list
// * also accepts "all" or "none"
@mixin transition-property($properties: $default-transition-property) {
@include experimental(transition-property, unquote($properties),
-moz, -webkit, -o, -ms, not -khtml, official
);
@if type-of($properties) == string { $properties: unquote($properties); }
@include build-prefix-values(transition-property, $properties);
}
// One or more durations in seconds
@ -78,37 +79,7 @@ $default-transition-delay: false !default;
$function: $default-transition-function,
$delay: $default-transition-delay
) {
@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
);
}
@else {
@include experimental(transition, $property $duration $function,
-moz,
-webkit,
-o,
-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); }
}
@include build-prefix-values(transition, compact($property $duration $function, false), $delay);
}
@mixin transition(
@ -124,10 +95,60 @@ $default-transition-delay: false !default;
$transition-10: false
) {
@if $transition-1 == default {
$transition-1 : -compass-space-list(compact($default-transition-property, $default-transition-duration, $default-transition-function, $default-transition-delay));
$transition-1 : (compact($default-transition-property, $default-transition-duration, $default-transition-function, $default-transition-delay));
}
$transition : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10);
@include experimental(transition, $transition,
-moz, -webkit, -o, -ms, not -khtml, official
);
@include build-prefix-values(transition, $transition);
}
@mixin build-prefix-values($property, $values, $delay: false) {
$raw-values: ($values);
$index: compact(false);
$webkit-value: compact(false);
$moz-value: compact(false);
$ms-value: compact(false);
$o-value: compact(false);
@each $value in $raw-values {
$value: compact(join($value, false));
$match: false;
@each $prefixed-value in $transitionable-prefixed-values {
@if index($value, $prefixed-value) {
$index: index($value, $prefixed-value);
$match: true;
}
}
@if $match {
$value-prefix: nth($value, $index);
$value-suffix: compact(false);
@for $i from 2 through length($value) {
$value-suffix: append($value-suffix, nth($value, $i), space);
}
$non-webkit-suffix: compact(append($value-suffix, $delay, space));
$webkit-value: append($webkit-value, compact(join(-webkit-#{$value-prefix}, $value-suffix)), comma);
$moz-value: append($moz-value, compact(join(-moz-#{$value-prefix}, $non-webkit-suffix)), comma);
$ms-value: append($ms-value, compact(join(-ms-#{$value-prefix}, $non-webkit-suffix)), comma);
$o-value: append($o-value, compact(join(-o-#{$value-prefix}, $non-webkit-suffix)), comma);
} @else {
$non-webkit-value: compact(append($value, $delay, space));
$webkit-value: append($webkit-value, $value, comma);
$moz-value: append($moz-value, $non-webkit-value, comma);
$ms-value: append($ms-value, $non-webkit-value, comma);
$o-value: append($o-value, $non-webkit-value, comma);
}
}
@if $experimental-support-for-webkit { -webkit-#{$property} : $webkit-value; @if $delay { -webkit-#{$property}-delay : $delay; } }
@if $experimental-support-for-mozilla { -moz-#{$property} : $moz-value; }
@if $experimental-support-for-microsoft { -ms-#{$property} : $ms-value; }
@if $experimental-support-for-opera { -o-#{$property} : $o-value; }
#{$property} : compact($values $delay);
}

View File

@ -25,4 +25,47 @@
-moz-transition-duration: 0.2s, 0.5s, 0.2s;
-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; }
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; }
.transform-transition {
-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; }
.multiple-transitions {
-webkit-transition: -webkit-transform 0.6s ease-out, opacity 0.2s ease-in;
-moz-transition: -moz-transform 0.6s ease-out, opacity 0.2s ease-in;
-ms-transition: -ms-transform 0.6s ease-out, opacity 0.2s ease-in;
-o-transition: -o-transform 0.6s ease-out, opacity 0.2s ease-in;
transition: transform 0.6s ease-out, opacity 0.2s ease-in; }
.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; }
.multiple-transition-properties {
-webkit-transition-property: opacity, -webkit-transform, left;
-moz-transition-property: opacity, -moz-transform, left;
-ms-transition-property: opacity, -ms-transform, left;
-o-transition-property: opacity, -o-transform, left;
transition-property: opacity, transform, left; }

View File

@ -3,4 +3,10 @@
.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); }
.transition-duration-string { @include transition-duration("0.2s, 0.5s, 0.2s"); }
.transition-duration-list { @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); }
.transform-transition { @include transition(transform 0.6s ease-out) }
.multiple-transitions { @include transition(transform 0.6s ease-out, opacity 0.2s ease-in) }
.transition-property { @include transition-property(transform); }
.multiple-transition-properties { @include transition-property((opacity, transform, left)); }