Skip to content

Instantly share code, notes, and snippets.

@Kronuz
Created April 22, 2011 17:03
Show Gist options
  • Save Kronuz/937098 to your computer and use it in GitHub Desktop.
Save Kronuz/937098 to your computer and use it in GitHub Desktop.
Transitions using lists
Index: css3/_transition.scss
index 60487bc..755b4f1 100644
--- a/css3/_transition.scss
+++ b/css3/_transition.scss
@@ -72,7 +72,7 @@ $default-transition-delay: false !default;
// Transition all-in-one shorthand
-@mixin transition(
+@mixin single-transition(
$properties: $default-transition-property,
$duration: $default-transition-duration,
$function: $default-transition-function,
@@ -83,3 +83,36 @@ $default-transition-delay: false !default;
@if $function { @include transition-timing-function($function); }
@if $delay { @include transition-delay($delay); }
}
+
+@mixin transition(
+ $transition-1 : default,
+ $transition-2 : false,
+ $transition-3 : false,
+ $transition-4 : false,
+ $transition-5 : false,
+ $transition-6 : false,
+ $transition-7 : false,
+ $transition-8 : false,
+ $transition-9 : false,
+ $transition-10: false
+) {
+ $legacy: (type-of($transition-1) == string and type-of(if($transition-2, $transition-2, 0)) == number and type-of(if($transition-3, $transition-3, '')) == string and type-of(if($transition-4, $transition-4, 0)) == number and ($transition-2 or $transition-3 or $transition-4));
+ @if $legacy {
+ @warn "Passing separate arguments for a single transition to transition is deprecated. " +
+ "Pass the values as a single space-separated list, or use the single-transition mixin.";
+ @include single-transition(
+ if($transition-1, $transition-1, $default-transition-property),
+ if($transition-2, $transition-2, $default-transition-duration),
+ if($transition-3, $transition-3, $default-transition-funciton),
+ if($transition-4, $transition-4, $default-transition-delay)
+ );
+ }
+ @else {
+ @if $transition-1 == default {
+ $transition-1 : -compass-space-list(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, not -ms, not -khtml, official
+ );
+}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment