transition-mixin fig.5

transition-mixin_fig5.scss

// The Map & Mixin
$transition-props-map: (
  color: (
    duration: 75ms,
    timing: ease-in
  ),
  opacity: (
    duration: 100ms,
    timing: ease-in,
  ),
  transform: (
    duration: 175ms,
    timing: ease-in-out,
  ),
  margin: banned,
  margin-top: banned,
  margin-right: banned,
  margin-bottom: banned,
  margin-left: banned,
  top: banned,
  right: banned,
  bottom: banned,
  left: banned,
  border: banned,
  outline: banned,
  border-size: banned,
  display: banned,
  position: banned,
  visibility: banned,
);

@mixin transition($properties...) {
    $transition-props: ();

    @each $property in $properties {
      $duration: 150ms; // default value
      $timing: ease; // default value
      
      @if map-has-key($transition-props-map, $property) {
        @if map-get($transition-props-map, $property) == 'banned' {
          @error 'The property `#{$property}` has poor performance or is not supported when used by the transition property. Please use a different property.';
        }
        
        $duration: map-get(map-get($transition-props-map, $property), duration);
        $timing: map-get(map-get($transition-props-map, $property), timing);
      }
        
      $transition-props: append($transition-props, #{$property + ' ' + $duration + ' ' + $timing}, comma);
    }

    transition: $transition-props;
}

// Example SCSS

.example-case {
  @include transition(opacity, color, transform);
  color: blue;
  opacity: 0.5;
  transform: translateX(0);
  
  &:hover,
  &:focus {
    color: dodgerblue;
    opacity: 1;
    transform: translatex(5px);
  }
}

// ======================= #### OUTPUT CSS #### ======================

.example-case {
  transition: opacity 100ms ease-in, color 75ms ease-in, transform 175ms ease-in-out;
  color: blue;
  opacity: 0.5;
  transform: translateX(0);
}

.example-case:hover,
.example-case:focus {
  color: dodgerblue;
  opacity: 1;
  transform: translateX(5px);
}