_transition.scss (2202B)
1 // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. 2 // Example: @include transition (all 2s ease-in-out); 3 // @include transition (opacity 1s ease-in 2s, width 2s ease-out); 4 // @include transition-property (transform, opacity); 5 6 @mixin transition($properties...) { 7 // Fix for vendor-prefix transform property 8 $needs-prefixes: false; 9 $webkit: (); 10 $moz: (); 11 $spec: (); 12 13 // Create lists for vendor-prefixed transform 14 @each $list in $properties { 15 @if nth($list, 1) == "transform" { 16 $needs-prefixes: true; 17 $list1: -webkit-transform; 18 $list2: -moz-transform; 19 $list3: (); 20 21 @each $var in $list { 22 $list3: join($list3, $var); 23 24 @if $var != "transform" { 25 $list1: join($list1, $var); 26 $list2: join($list2, $var); 27 } 28 } 29 30 $webkit: append($webkit, $list1); 31 $moz: append($moz, $list2); 32 $spec: append($spec, $list3); 33 } @else { 34 $webkit: append($webkit, $list, comma); 35 $moz: append($moz, $list, comma); 36 $spec: append($spec, $list, comma); 37 } 38 } 39 40 @if $needs-prefixes { 41 -webkit-transition: $webkit; 42 -moz-transition: $moz; 43 transition: $spec; 44 } @else { 45 @if length($properties) >= 1 { 46 @include prefixer(transition, $properties, webkit moz spec); 47 } @else { 48 $properties: all 0.15s ease-out 0s; 49 @include prefixer(transition, $properties, webkit moz spec); 50 } 51 } 52 } 53 54 @mixin transition-property($properties...) { 55 -webkit-transition-property: transition-property-names($properties, "webkit"); 56 -moz-transition-property: transition-property-names($properties, "moz"); 57 transition-property: transition-property-names($properties, false); 58 } 59 60 @mixin transition-duration($times...) { 61 @include prefixer(transition-duration, $times, webkit moz spec); 62 } 63 64 @mixin transition-timing-function($motions...) { 65 // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() 66 @include prefixer(transition-timing-function, $motions, webkit moz spec); 67 } 68 69 @mixin transition-delay($times...) { 70 @include prefixer(transition-delay, $times, webkit moz spec); 71 }