diff --git a/docs/_config.yml b/docs/_config.yml index 3cd9eaf85f5..3a1c9475a5e 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -51,5 +51,7 @@ nav_docs_sections: title: More About Refs - id: tooling-integration title: Tooling Integration + - id: addons + title: Add-ons - id: reference title: Reference diff --git a/docs/docs/08-tooling-integration.md b/docs/docs/08-tooling-integration.md index 32365260a46..af758dd1986 100644 --- a/docs/docs/08-tooling-integration.md +++ b/docs/docs/08-tooling-integration.md @@ -4,7 +4,7 @@ title: Tooling Integration layout: docs permalink: tooling-integration.html prev: more-about-refs.html -next: reference.html +next: addons.html --- Every project uses a different system for building and deploying JavaScript. We've tried to make React as environment-agnostic as possible. diff --git a/docs/docs/09-addons.md b/docs/docs/09-addons.md new file mode 100644 index 00000000000..ad35da4956b --- /dev/null +++ b/docs/docs/09-addons.md @@ -0,0 +1,93 @@ +--- +id: addons +title: Add-ons +layout: docs +permalink: addons.html +prev: tooling-integration.html +next: reference.html +--- + +## CSS Animation and Transitions + +`ReactTransitions` is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. `ReactTransitions` is inspired by the excellent [ng-animate](http://www.nganimate.org/) library. + +### Getting started + +`ReactTransitionGroup` is the interface to `ReactTransitions`. This is a simple element that wraps all of the components you are interested in animating. Here's an example where we fade list items in and out. **TODO: how do we import this?** + +```javascript{22-24} +/** @jsx React.DOM */ +var TodoList = React.createClass({ + getInitialState: function() { + return {items: ['hello', 'world', 'click', 'me']}; + }, + handleAdd: function() { + var newItems = + this.state.items.concat([prompt('Enter some text')]); + this.setState({items: newItems}); + }, + render: function() { + var items = this.state.items.map(function(item, i) { + return ( +
+ {item}} +
+ ); + }.bind(this)); + return ( +
+
+ + {items} + +
+ ); + } +}); +``` + +In this component, when a new item is added `ReactTransitionGroup` it will get the `example-enter` CSS class and the `example-enter-active` CSS class added in the next tick. This is a convention based on the `transitionName` prop. + +You can use these classes to trigger a CSS animation or transition. For example, try adding this CSS and adding a new list item: + +```css +.example-enter { + opacity: 0.01; + transition: opacity .5s ease-in; +} + +.example-enter.example-enter-active { + opacity: 0.99; +} +``` + +You'll notice that when you try to remove an item `ReactTransitionGroup` keeps it in the DOM. If you're using an unminified build of React you'll see a warning that React was expecting an animation or transition to occur. That's because `ReactTransitionGroup` keeps your DOM elements on the page until the animation completes. Try adding this CSS: + +```css +.example-leave { + opacity: 0.99; + transition: opacity .5s ease-in; +} + +.example-leave.example-leave-active { + opacity: 0.01; +} +``` + +### Disabling animations + +You can disable animating `enter` or `leave` animations if you want. For example, sometimes you may want an `enter` animation and no `leave` animation, but `ReactTransitionGroup` waits for an animation to complete before removing your DOM node. You can add `transitionEnter={false}` or `transitionLeave={false}` props to `ReactTransitionGroup` to disable these animations. + +### Rendering a different component + +By default `ReactTransitionGroup` renders as a `span`. You can change this behavior by providing a `component` prop. For example, here's how you would render a `