You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/docs/09.1-animation.md
+45-15Lines changed: 45 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,16 +7,20 @@ prev: addons.html
7
7
next: two-way-binding-helpers.html
8
8
---
9
9
10
-
`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.
10
+
React provides a `ReactTransitionGroup` addon component as a low-level API for animation, and a `ReactCSSTransitionGroup` for easily implementing basic CSS animations and transitions.
11
11
12
-
## Getting Started
12
+
## High-level API: `ReactCSSTransitionGroup`
13
13
14
-
`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.
14
+
`ReactCSSTransitionGroup` is based on `ReactTransitionGroup` and 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.
15
+
16
+
### Getting Started
17
+
18
+
`ReactCSSTransitionGroup` 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.
15
19
16
20
```javascript{22-24}
17
21
/** @jsx React.DOM */
18
22
19
-
var ReactTransitionGroup = React.addons.TransitionGroup;
23
+
var ReactCSSTransitionGroup = React.addons.TransitionGroup;
20
24
21
25
var TodoList = React.createClass({
22
26
getInitialState: function() {
@@ -43,16 +47,16 @@ var TodoList = React.createClass({
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.
59
+
In this component, when a new item is added to `ReactCSSTransitionGroup` 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.
56
60
57
61
You can use these classes to trigger a CSS animation or transition. For example, try adding this CSS and adding a new list item:
58
62
@@ -67,7 +71,7 @@ You can use these classes to trigger a CSS animation or transition. For example,
67
71
}
68
72
```
69
73
70
-
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:
74
+
You'll notice that when you try to remove an item `ReactCSSTransitionGroup` 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 `ReactCSSTransitionGroup` keeps your DOM elements on the page until the animation completes. Try adding this CSS:
71
75
72
76
```css
73
77
.example-leave {
@@ -80,20 +84,46 @@ You'll notice that when you try to remove an item `ReactTransitionGroup` keeps i
80
84
}
81
85
```
82
86
83
-
## Disabling Animations
87
+
### Disabling Animations
88
+
89
+
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 `ReactCSSTransitionGroup` waits for an animation to complete before removing your DOM node. You can add `transitionEnter={false}` or `transitionLeave={false}` props to `ReactCSSTransitionGroup` to disable these animations.
90
+
91
+
## Low-level API: `ReactTransitionGroup`
92
+
93
+
`ReactTransitionGroup` is the basis for animations. When children are declaratively added or removed from it (as in the example above) special lifecycle hooks are called on them.
94
+
95
+
### `componentWillEnter(callback)`
96
+
97
+
This is called at the same time as `componentDidMount()`. It will block other animations from occurring until `callback` is called.
98
+
99
+
### `componentDidEnter()`
84
100
85
-
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.
101
+
This is called when the `willEnter``callback` is called.
86
102
87
-
## Rendering a Different Component
103
+
### `componentWillLeave(callback)`
104
+
105
+
This is called when the child has been removed from the `ReactTransitionGroup`. Though the child has been removed, `ReactTransitionGroup` will keep it in the DOM until `callback` is called.
106
+
107
+
Note that because the child has been removed you can no longer send it reactive updates. If you need this functionality, see the section on Child Factories below.
108
+
109
+
### `componentDidLeave()`
110
+
111
+
This is called when the `willLeave``callback` is called (at the same time as `componentWillUnmount`).
112
+
113
+
### Rendering a Different Component
88
114
89
115
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>`:
90
116
91
-
```javascript{3}
92
-
<ReactTransitionGroup
93
-
transitionName="example"
94
-
component={React.DOM.ul}>
117
+
```javascript{1}
118
+
<ReactTransitionGroup component={React.DOM.ul}>
95
119
...
96
120
</ReactTransitionGroup>
97
121
```
98
122
99
123
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!
124
+
125
+
### Advanced Feature: Child Factories
126
+
127
+
`ReactTransitionGroup` is unique because when a child leaves `ReactTransitionGroup` it may stay in the DOM after the child is removed from the group. This means that you can't send it reactive updates anymore. If you need to send it updates, you can provide a `childFactory` callback prop which will take the original child instance (even after it has left the group) and return a React component to render in its place.
128
+
129
+
Normally you do not need to think about this feature. If you do, the easiest way to understand how this works is to look at the source for `ReactCSSTransitionGroup`.
0 commit comments