mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-26 18:58:17 +00:00
f58a507cb7
key should never be index into an array or there are bugs. Especially in transitions. Fixes #853
100 lines
3.4 KiB
Markdown
100 lines
3.4 KiB
Markdown
---
|
|
id: animation
|
|
title: Animation
|
|
layout: docs
|
|
permalink: animation.html
|
|
prev: addons.html
|
|
next: two-way-binding-helpers.html
|
|
---
|
|
|
|
`ReactTransitions` is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. It's 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.
|
|
|
|
```javascript{22-24}
|
|
/** @jsx React.DOM */
|
|
|
|
var ReactTransitionGroup = React.addons.TransitionGroup;
|
|
|
|
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});
|
|
},
|
|
handleRemove: function(i) {
|
|
var newItems = this.state.items;
|
|
newItems.splice(i, 1)
|
|
this.setState({items: newItems});
|
|
},
|
|
render: function() {
|
|
var items = this.state.items.map(function(item, i) {
|
|
return (
|
|
<div key={item} onClick={this.handleRemove.bind(this, i)}>
|
|
{item}
|
|
</div>
|
|
);
|
|
}.bind(this));
|
|
return (
|
|
<div>
|
|
<div><button onClick={this.handleAdd} /></div>
|
|
<ReactTransitionGroup transitionName="example">
|
|
{items}
|
|
</ReactTransitionGroup>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
```
|
|
|
|
In this component, when a new item is added to `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: 1;
|
|
}
|
|
```
|
|
|
|
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 with add-ons 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: 1;
|
|
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 `<ul>`:
|
|
|
|
```javascript{3}
|
|
<ReactTransitionGroup
|
|
transitionName="example"
|
|
component={React.DOM.ul}>
|
|
...
|
|
</ReactTransitionGroup>
|
|
```
|
|
|
|
Every DOM component is under `React.DOM`. However, `component` does not need to be a DOM component. It can be any React component you want; even ones you've written yourself!
|