Merge pull request #313 from silvenon/docs-timing

Add note about animation timing in the docs

Author: silvenon

src/Transition.js

@@ -55,18 +55,18 @@ export const EXITING = 'exiting';
  * component (such as by adding styles or classes) when it changes states.
  *
  * There are 4 main states a Transition can be in:
- *  - `entering`
- *  - `entered`
- *  - `exiting`
- *  - `exited`
+ *  - `'entering'`
+ *  - `'entered'`
+ *  - `'exiting'`
+ *  - `'exited'`
  *
  * Transition state is toggled via the `in` prop. When `true` the component begins the
  * "Enter" stage. During this stage, the component will shift from its current transition state,
  * to `'entering'` for the duration of the transition and then to the `'entered'` stage once
  * it's complete. Let's take the following example:
  *
  * ```jsx
- * state= { in: false };
+ * state = { in: false };
  *
  * toggleEnterState = () => {
  *   this.setState({ in: true });
@@ -87,6 +87,14 @@ export const EXITING = 'exiting';
  *
  * When `in` is `false` the same thing happens except the state moves from `'exiting'` to `'exited'`.
  *
+ * ## Timing
+ *
+ * Timing is often the trickiest part of animation, mistakes can result in slight delays
+ * that are hard to pin down. A common example is when you want to add an exit transition,
+ * you should set the desired final styles when the state is `'exiting'`. That's when the
+ * transition to those styles will start and, if you matched the `timeout` prop with the
+ * CSS Transition duration, it will end exactly when the state changes to `'exited'`.
+ *
  * > **Note**: For simpler transitions the `Transition` component might be enough, but
  * > take into account that it's platform-agnostic, while the `CSSTransition` component
  * > [forces reflows](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)

www/src/css/bootstrap.scss

@@ -16,6 +16,7 @@ pre {
 }
 
 code {
+  padding: 0;
   background: transparent;
   color: $hue-3;
   a & {

www/src/pages/index.js

@@ -24,6 +24,17 @@ class Index extends React.Component {
     return (
       <div>
         <h1>React Transition Group</h1>
+        <blockquote>
+          <p>
+            Exposes simple components useful for defining entering and exiting
+            transitions. React Transition Group is not an animation library like{' '}
+            <a href="https://github.com/chenglou/react-motion">React-Motion</a>,
+            it does not animate styles by itself. Instead it exposes transition
+            stages, manages classes and group elements and manipulates the DOM
+            in useful ways, making the implementation of actual visual
+            transitions much easier.
+          </p>
+        </blockquote>
         <section>
           <h2>Getting Started</h2>
           <p />