Example reusable scss mixin of a slide in animation for a React component using CSSTransitionGroup

AnimatedComponent.jsx

import React from "react";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";
import SomeOtherComponentOrChild from "./SomeOtherComponentOrChild" // more likely defined inline

// Great for list items or quick, inline forms!

const AnimatedComponent = props => 
  <ReactCSSTransitionGroup
    transitionName="transition-name" // creates class that is passed to scss mixin
    transitionEnterTimeout={400}
    transitionLeaveTimeout={400}
  >
    <SomeOtherComponentOrChild {...props} />
  </ReactCSSTransitionGroup>

export default AnimatedComponent;

slideInAnimation.scss

// scss mixin by @ashsidhu
@mixin slideInAnimation($selector, $height: 9rem, $duration: 400ms) {
  %#{$selector}-closed {
    opacity: 0.01;
    height: 0rem;
  }
  %#{$selector}-open {
    opacity: 1;
    height: $height;
    overflow: hidden;
  }
  %#{$selector}-transition {
    transition: all #{$duration} ease-in;
  }
  .#{$selector}-enter {
    @extend %#{$selector}-closed, %#{$selector}-transition;
  }
  .#{$selector}-enter.#{$selector}-enter-active {
    @extend %#{$selector}-open;
  }
  .#{$selector}-leave {
    @extend %#{$selector}-open, %#{$selector}-transition;
  }
  .#{$selector}-leave.#{$selector}-leave-active {
    @extend %#{$selector}-closed;
  }
}

// specific inclusion w/ transitionName string prop
@include slideInAnimation("transition-name", 9rem);