From 7fe42ed9b090c582b65b25e4cc434c32145c4c29 Mon Sep 17 00:00:00 2001
From: Kevin Jennison <kevin.jennison1@gmail.com>
Date: Sun, 5 Jul 2015 15:48:42 -0700
Subject: [PATCH] Update TimeoutTransitionGroup to include "appear" transition
 page.

React 0.13 added the "appear" transition phase to allow for animations at the initial mount of the component:
https://facebook.github.io/react/docs/animation.html

This adds the appear transition phase to TimeoutTransitionGroup. Props "transitionAppear" and "appearTimeout" are optional to not cause breaking changes.
---
 js/timeout-transition-group.jsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/js/timeout-transition-group.jsx b/js/timeout-transition-group.jsx
index 463de8f..644cbac 100644
--- a/js/timeout-transition-group.jsx
+++ b/js/timeout-transition-group.jsx
@@ -133,7 +133,10 @@ var TimeoutTransitionGroupChild = React.createClass({
         if (!animationSupported()) {
             endListener();
         } else {
-            if (animationType === "enter") {
+            if (animationType === "appear") {
+                this.animationTimeout = setTimeout(endListener,
+                                                   this.props.appearTimeout);
+            } else if (animationType === "enter") {
                 this.animationTimeout = setTimeout(endListener,
                                                    this.props.enterTimeout);
             } else if (animationType === "leave") {
@@ -179,6 +182,14 @@ var TimeoutTransitionGroupChild = React.createClass({
         }
     },
 
+    componentWillAppear: function(done) {
+        if (this.props.appear) {
+            this.transition('appear', done);
+        } else {
+            done();
+        }
+    },
+
     componentWillEnter: function(done) {
         if (this.props.enter) {
             this.transition('enter', done);
@@ -202,15 +213,18 @@ var TimeoutTransitionGroupChild = React.createClass({
 
 var TimeoutTransitionGroup = React.createClass({
     propTypes: {
+        appearTimeout: React.PropTypes.number,
         enterTimeout: React.PropTypes.number.isRequired,
         leaveTimeout: React.PropTypes.number.isRequired,
         transitionName: React.PropTypes.string.isRequired,
+        transitionAppear: React.PropTypes.bool,
         transitionEnter: React.PropTypes.bool,
         transitionLeave: React.PropTypes.bool,
     },
 
     getDefaultProps: function() {
         return {
+            transitionAppear: false,
             transitionEnter: true,
             transitionLeave: true
         };
@@ -219,9 +233,11 @@ var TimeoutTransitionGroup = React.createClass({
     _wrapChild: function(child) {
         return (
             <TimeoutTransitionGroupChild
+                    appearTimeout={this.props.appearTimeout}
                     enterTimeout={this.props.enterTimeout}
                     leaveTimeout={this.props.leaveTimeout}
                     name={this.props.transitionName}
+                    appear={this.props.transitionAppear}
                     enter={this.props.transitionEnter}
                     leave={this.props.transitionLeave}>
                 {child}