From d90c6b1e71aae7fff5778421b9798aea0ce958a8 Mon Sep 17 00:00:00 2001 From: petehunt Date: Tue, 3 Sep 2013 17:39:27 -0700 Subject: [PATCH] animate docs --- docs/_config.yml | 2 + docs/docs/08-tooling-integration.md | 2 +- docs/docs/09-addons.md | 93 +++++++++++++++++++ .../docs/{09-reference.md => 10-reference.md} | 6 +- 4 files changed, 99 insertions(+), 4 deletions(-) create mode 100644 docs/docs/09-addons.md rename docs/docs/{09-reference.md => 10-reference.md} (97%) 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 `