react-transition-group SASS Mixin

react-transition-group-utils.scss

@mixin transition($childClasses, $enter, $normal, $exit, $transition, $transitionExit: null) {
  @if not ($transitionExit) {
    $transitionExit: $transition;
  }

  $split-values: str-split($childClasses, ", ");
  @each $childClass in $split-values {
    &-enter #{$childClass}, &-appear #{$childClass} {
      @include list($enter);
    }

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

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

    &-enter-active #{$childClass}, &-appear-active #{$childClass} {
      @include list($transition);
    }

    &-exit-active #{$childClass} {
      @include list($transitionExit);
    }
  }
}