Updated with the following:
- 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:
parent
cf60a90931
commit
6a3d024cc1
@ -31,7 +31,29 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
|
|||||||
// * also accepts "all" or "none"
|
// * also accepts "all" or "none"
|
||||||
|
|
||||||
@mixin transition-property($properties: $default-transition-property) {
|
@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
|
// One or more durations in seconds
|
||||||
@ -78,29 +100,56 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
|
|||||||
$function: $default-transition-function,
|
$function: $default-transition-function,
|
||||||
$delay: $default-transition-delay
|
$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 {
|
@if $property and $duration and $function {
|
||||||
// Shorthand (see https://github.com/chriseppstein/compass/issues/585)
|
// Shorthand (see https://github.com/chriseppstein/compass/issues/585)
|
||||||
@if $delay {
|
@if $delay {
|
||||||
-webkit-transition: $property $duration $function;
|
@if $match {
|
||||||
-webkit-transition-delay: $delay;
|
@if $experimental-support-for-webkit { -webkit-transition: -webkit-#{$property} $duration $function; -webkit-transition-delay: $delay; }
|
||||||
@include experimental(transition, $property $duration $function $delay,
|
@if $experimental-support-for-mozilla { -moz-transition: -moz-#{$property} $duration $function $delay; }
|
||||||
-moz,
|
@if $experimental-support-for-microsoft { -ms-transition: -ms-#{$property} $duration $function $delay; }
|
||||||
not -webkit,
|
@if $experimental-support-for-opera { -o-transition: -o-#{$property} $duration $function $delay; }
|
||||||
-o,
|
@include experimental(transition, $property $duration $function $delay,
|
||||||
-ms,
|
not -moz, not -webkit, not -o, not -ms, not -khtml, official
|
||||||
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 {
|
@else {
|
||||||
@include experimental(transition, $property $duration $function,
|
@if $match {
|
||||||
-moz,
|
@if $experimental-support-for-webkit { -webkit-transition: -webkit-#{$property} $duration $function; }
|
||||||
-webkit,
|
@if $experimental-support-for-mozilla { -moz-transition: -moz-#{$property} $duration $function; }
|
||||||
-o,
|
@if $experimental-support-for-microsoft { -ms-transition: -ms-#{$property} $duration $function; }
|
||||||
-ms,
|
@if $experimental-support-for-opera { -o-transition: -o-#{$property} $duration $function; }
|
||||||
not -khtml,
|
@include experimental(transition, $property $duration $function,
|
||||||
official
|
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 {
|
@else {
|
||||||
@ -198,10 +247,10 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
-webkit-transition: $webkit-transition;
|
@if $experimental-support-for-webkit { -webkit-transition: $webkit-transition; }
|
||||||
-moz-transition: $moz-transition;
|
@if $experimental-support-for-mozilla { -moz-transition: $moz-transition; }
|
||||||
-ms-transition: $ms-transition;
|
@if $experimental-support-for-microsoft { -ms-transition: $ms-transition; }
|
||||||
-o-transition: $o-transition;
|
@if $experimental-support-for-opera { -o-transition: $o-transition; }
|
||||||
|
|
||||||
@include experimental(transition, $transition,
|
@include experimental(transition, $transition,
|
||||||
not -moz, not -webkit, not -o, not -ms, not -khtml, official
|
not -moz, not -webkit, not -o, not -ms, not -khtml, official
|
||||||
|
@ -25,4 +25,26 @@
|
|||||||
-moz-transition-duration: 0.2s, 0.5s, 0.2s;
|
-moz-transition-duration: 0.2s, 0.5s, 0.2s;
|
||||||
-ms-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;
|
-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; }
|
||||||
|
|
||||||
|
.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,4 +3,7 @@
|
|||||||
.single-transition-without-delay { @include single-transition(all, 0.6s, ease-out); }
|
.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); }
|
.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-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); }
|
||||||
|
.transition-property { @include transition-property(transform); }
|
||||||
|
Loading…
Reference in New Issue
Block a user