Merge pull request #3761 from alexpien/CustomClassesForReactCSSTransitionGroup

Custom class names in ReactCSSTransitionGroup

docs/docs/10.1-animation.md

@@ -117,6 +117,35 @@ At the initial mount, all children of the `ReactCSSTransitionGroup` will `appear
 >
 > The prop `transitionAppear` was added to `ReactCSSTransitionGroup` in version `0.13`. To maintain backwards compatibility, the default value is set to `false`.
 
+### Custom Classes
+
+It is also possible to use custom class names for each of the steps in your transitions. Instead of passing a string into transitionName you can pass an object containing either the `enter` and `leave` class names, or an object containing the `enter`, `enter-active`, `leave-active`, and `leave` class names. If only the enter and leave classes are provided, the enter-active and leave-active classes will be determined by appending '-active' to the end of the class name. Here are two examples using custom classes:
+
+```javascript
+  ...
+  <ReactCSSTransitionGroup
+    transitionName={
+      enter: 'enter',
+      enterActive: 'enterActive',
+      leave: 'leave',
+      leaveActive: 'leaveActive',
+      appear: 'appear',
+      appearActive: 'appearActive'
+    }>
+    {item}
+  </ReactCSSTransitionGroup>
+
+  <ReactCSSTransitionGroup
+    transitionName={
+      enter: 'enter',
+      leave: 'leave',
+      appear: 'appear'
+    }>
+    {item2}
+  </ReactCSSTransitionGroup>
+  ...
+```
+
 ### Animation Group Must Be Mounted To Work
 
 In order for it to apply transitions to its children, the `ReactCSSTransitionGroup` must already be mounted in the DOM or the prop `transitionAppear` must be set to `true`. The example below would not work, because the `ReactCSSTransitionGroup` is being mounted along with the new item, instead of the new item being mounted within it. Compare this to the [Getting Started](#getting-started) section above to see the difference.

src/addons/transitions/ReactCSSTransitionGroup.js

@@ -27,7 +27,22 @@ var ReactCSSTransitionGroup = React.createClass({
   displayName: 'ReactCSSTransitionGroup',
 
   propTypes: {
-    transitionName: React.PropTypes.string.isRequired,
+    transitionName: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.shape({
+        enter: React.PropTypes.string,
+        leave: React.PropTypes.string,
+        active: React.PropTypes.string
+      }),
+      React.PropTypes.shape({
+        enter: React.PropTypes.string,
+        enterActive: React.PropTypes.string,
+        leave: React.PropTypes.string,
+        leaveActive: React.PropTypes.string,
+        appear: React.PropTypes.string,
+        appearActive: React.PropTypes.string
+      })
+    ]).isRequired,
     transitionAppear: React.PropTypes.bool,
     transitionEnter: React.PropTypes.bool,
     transitionLeave: React.PropTypes.bool,

src/addons/transitions/ReactCSSTransitionGroupChild.js

@@ -56,8 +56,9 @@ var ReactCSSTransitionGroupChild = React.createClass({
       return;
     }
 
-    var className = this.props.name + '-' + animationType;
-    var activeClassName = className + '-active';
+    var className = this.props.name[animationType] || this.props.name + '-' + animationType;
+    var activeClassName = this.props.name[animationType + 'Active'] || className + '-active';
+
     var noEventTimeout = null;
 
     var endListener = function(e) {