From ed457d6c8403fde398e8c390638a51d1929228e5 Mon Sep 17 00:00:00 2001
From: Daniel Rodgers-Pryor <djrodgerspryor@gmail.com>
Date: Wed, 5 Aug 2015 13:04:25 +1000
Subject: [PATCH] ReactCSSTransitionGroup timeouts

As discussed in issue 1326
(https://github.com/facebook/react/issues/1326) transitionend events are
unreliable; they may not fire because the element is no longer painted,
the browser tab is no longer focused or for a range of other reasons.
This is particularly harmful during leave transitions since the leaving
element will be permanently stuck in the DOM (and possibly visible).

The ReactCSSTransitionGroup now requires timeouts to be passed in
explicitly for each type of animation. Omitting the timeout duration
for a transition now triggers a PropTypes warning with a link to the
updated documentation.
---
 docs/10.1-animation.md | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/docs/10.1-animation.md b/docs/10.1-animation.md
index 0cb11b3a..9fba2d35 100644
--- a/docs/10.1-animation.md
+++ b/docs/10.1-animation.md
@@ -44,7 +44,7 @@ var TodoList = React.createClass({
     return (
       <div>
         <button onClick={this.handleAdd}>Add Item</button>
-        <ReactCSSTransitionGroup transitionName="example">
+        <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300} >
           {items}
         </ReactCSSTransitionGroup>
       </div>
@@ -67,23 +67,21 @@ You can use these classes to trigger a CSS animation or transition. For example,
 
 .example-enter.example-enter-active {
   opacity: 1;
-  transition: opacity .5s ease-in;
+  transition: opacity 500ms ease-in;
 }
-```
-
-You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keeps it in the DOM. If you're using an unminified build of React with add-ons you'll see a warning that React was expecting an animation or transition to occur. That's because `ReactCSSTransitionGroup` keeps your DOM elements on the page until the animation completes. Try adding this CSS:
 
-```css
 .example-leave {
   opacity: 1;
 }
 
 .example-leave.example-leave-active {
   opacity: 0.01;
-  transition: opacity .5s ease-in;
+  transition: opacity 300ms ease-in;
 }
 ```
 
+You'll notice that animation durations need to be specified in both the CSS and the render method; this tells React when to remove the animation classes from the element and -- if it's leaving -- when to remove the element from the DOM.
+
 ### Animate Initial Mounting
 
 `ReactCSSTransitionGroup` provides the optional prop `transitionAppear`, to add an extra transition phase at the initial mount of the component. There is generally no transition phase at the initial mount as the default value of `transitionAppear` is `false`. The following is an example which passes the prop `transitionAppear` with the value `true`.
@@ -91,7 +89,7 @@ You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keep
 ```javascript{3-5}
   render: function() {
     return (
-      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
+      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}>
         <h1>Fading at Initial Mount</h1>
       </ReactCSSTransitionGroup>
     );
@@ -184,7 +182,7 @@ var ImageCarousel = React.createClass({
   render: function() {
     return (
       <div>
-        <ReactCSSTransitionGroup transitionName="carousel">
+        <ReactCSSTransitionGroup transitionName="carousel" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
           <img src={this.props.imageSrc} key={this.props.imageSrc} />
         </ReactCSSTransitionGroup>
       </div>