_transition.scss 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  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. }
  29. // Create lists for non-prefixed transition properties
  30. @else {
  31. $webkit: append($webkit, $list, comma);
  32. $moz: append($moz, $list, comma);
  33. $spec: append($spec, $list, comma);
  34. }
  35. }
  36. @if $needs-prefixes {
  37. -webkit-transition: $webkit;
  38. -moz-transition: $moz;
  39. transition: $spec;
  40. }
  41. @else {
  42. @if length($properties) >= 1 {
  43. @include prefixer(transition, $properties, webkit moz spec);
  44. }
  45. @else {
  46. $properties: all 0.15s ease-out 0s;
  47. @include prefixer(transition, $properties, webkit moz spec);
  48. }
  49. }
  50. }
  51. @mixin transition-property ($properties...) {
  52. -webkit-transition-property: transition-property-names($properties, 'webkit');
  53. -moz-transition-property: transition-property-names($properties, 'moz');
  54. transition-property: transition-property-names($properties, false);
  55. }
  56. @mixin transition-duration ($times...) {
  57. @include prefixer(transition-duration, $times, webkit moz spec);
  58. }
  59. @mixin transition-timing-function ($motions...) {
  60. // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
  61. @include prefixer(transition-timing-function, $motions, webkit moz spec);
  62. }
  63. @mixin transition-delay ($times...) {
  64. @include prefixer(transition-delay, $times, webkit moz spec);
  65. }