Sass mixins to easily generate react-transition-group classes

react-transition-group-mixins.scss

@mixin list($map) {
  @each $key, $value in $map {
    #{$key}: $value;
  }
}

@mixin list($map) {
  @each $key, $value in $map {
    #{$key}: $value;
  }
}

@mixin transition($enter, $exit, $transition: all .15s ease-in, $transitionExit: null) {
  @if not ($transitionExit) {
    $transitionExit: $transition;
  }
  
  $name: &;

  &-enter, &-appear, &-exit#{$name}-exit-active, &-exit-done {
    @include list($enter);
  }

  &-exit#{$name}-exit-active {
    transition: $transition;
  }

  &-exit, &-enter#{$name}-enter-active, &-enter-done {
    @include list($exit);
  }

  &-enter#{$name}-enter-active, &-appear#{$name}-appear-active {
    transition: $transitionExit;
  }
}

/*
.fade {
  @include transition((
    opacity: 0,
  ), (
    opacity: 1,
  ), opacity .3 ease-in, opacity .4 ease-out);
}

Will result in 

.fade-enter, .fade-appear, .fade-exit.fade-exit-active, .fade-exit-done {
  opacity: 0;
}
.fade-exit.fade-exit-active {
  transition: all 0.15s ease-in;
}
.fade-exit, .fade-enter.fade-enter-active, .fade-enter-done {
  opacity: 1;
}
.fade-enter.fade-enter-active, .fade-appear.fade-appear-active {
  transition: all 0.15s ease-in;
}

/*