diff --git a/src/Transition.js b/src/Transition.js index cbe077cc..380bdd70 100644 --- a/src/Transition.js +++ b/src/Transition.js @@ -55,10 +55,10 @@ 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, @@ -66,7 +66,7 @@ export const EXITING = 'exiting'; * 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) diff --git a/www/src/css/bootstrap.scss b/www/src/css/bootstrap.scss index 47224865..f4fed7cc 100644 --- a/www/src/css/bootstrap.scss +++ b/www/src/css/bootstrap.scss @@ -16,6 +16,7 @@ pre { } code { + padding: 0; background: transparent; color: $hue-3; a & { diff --git a/www/src/pages/index.js b/www/src/pages/index.js index fb3138c6..3a6831c0 100644 --- a/www/src/pages/index.js +++ b/www/src/pages/index.js @@ -24,6 +24,17 @@ class Index extends React.Component { return (

React Transition Group

+
+

+ Exposes simple components useful for defining entering and exiting + transitions. React Transition Group is not an animation library like{' '} + React-Motion, + 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. +

+

Getting Started