From ff6cb1735988efefa52c75b229c89d5c0d66e893 Mon Sep 17 00:00:00 2001
From: alexpien <alexpien@gmail.com>
Date: Mon, 27 Apr 2015 19:16:24 -0700
Subject: [PATCH 1/2] Update 10.1-animation.md

Custom classes
---
 docs/10.1-animation.md | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/docs/10.1-animation.md b/docs/10.1-animation.md
index 568ce3fc5..143cf1ba7 100644
--- a/docs/10.1-animation.md
+++ b/docs/10.1-animation.md
@@ -84,6 +84,32 @@ You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keep
 }
 ```
 
+### 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'
+    }>
+    {item}
+  </ReactCSSTransitionGroup>
+  
+  <ReactCSSTransitionGroup
+    transitionName={
+      enter: 'enter',
+      leave: 'leave'
+    }>
+    {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. 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.

From 3a1a52962660b216bf0a4ec17f219f5bad627d0f Mon Sep 17 00:00:00 2001
From: alexpien <pien@pien-mbp.dhcp.thefacebook.com>
Date: Mon, 15 Jun 2015 12:05:18 -0700
Subject: [PATCH 2/2] Add support for appear and appear-active classes

---
 docs/10.1-animation.md | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/docs/10.1-animation.md b/docs/10.1-animation.md
index 143cf1ba7..0f3de7b8c 100644
--- a/docs/10.1-animation.md
+++ b/docs/10.1-animation.md
@@ -85,6 +85,7 @@ You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keep
 ```
 
 ### 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
@@ -94,7 +95,9 @@ It is also possible to use custom class names for each of the steps in your tran
       enter: 'enter',
       enterActive: 'enterActive',
       leave: 'leave',
-      leaveActive: 'leaveActive'
+      leaveActive: 'leaveActive',
+      appear: 'appear',
+      appearActive: 'appearActive'
     }>
     {item}
   </ReactCSSTransitionGroup>
@@ -102,7 +105,8 @@ It is also possible to use custom class names for each of the steps in your tran
   <ReactCSSTransitionGroup
     transitionName={
       enter: 'enter',
-      leave: 'leave'
+      leave: 'leave',
+      appear: 'appear'
     }>
     {item2}
   </ReactCSSTransitionGroup>