_transition.scss 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  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. @mixin transition($properties...) {
  6. // Fix for vendor-prefix transform property
  7. $needs-prefixes: false;
  8. $webkit: ();
  9. $moz: ();
  10. $spec: ();
  11. // Create lists for vendor-prefixed transform
  12. @each $list in $properties {
  13. @if nth($list, 1) == "transform" {
  14. $needs-prefixes: true;
  15. $list1: -webkit-transform;
  16. $list2: -moz-transform;
  17. $list3: ();
  18. @each $var in $list {
  19. $list3: join($list3, $var);
  20. @if $var != "transform" {
  21. $list1: join($list1, $var);
  22. $list2: join($list2, $var);
  23. }
  24. }
  25. $webkit: append($webkit, $list1);
  26. $moz: append($moz, $list2);
  27. $spec: append($spec, $list3);
  28. } @else {
  29. $webkit: append($webkit, $list, comma);
  30. $moz: append($moz, $list, comma);
  31. $spec: append($spec, $list, comma);
  32. }
  33. }
  34. @if $needs-prefixes {
  35. -webkit-transition: $webkit;
  36. -moz-transition: $moz;
  37. transition: $spec;
  38. } @else {
  39. @if length($properties) >= 1 {
  40. @include prefixer(transition, $properties, webkit moz spec);
  41. } @else {
  42. $properties: all 0.15s ease-out 0s;
  43. @include prefixer(transition, $properties, webkit moz spec);
  44. }
  45. }
  46. }
  47. @mixin transition-property($properties...) {
  48. -webkit-transition-property: transition-property-names($properties, "webkit");
  49. -moz-transition-property: transition-property-names($properties, "moz");
  50. transition-property: transition-property-names($properties, false);
  51. }
  52. @mixin transition-duration($times...) {
  53. @include prefixer(transition-duration, $times, webkit moz spec);
  54. }
  55. @mixin transition-timing-function($motions...) {
  56. // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
  57. @include prefixer(transition-timing-function, $motions, webkit moz spec);
  58. }
  59. @mixin transition-delay($times...) {
  60. @include prefixer(transition-delay, $times, webkit moz spec);
  61. }