dillon1000/react

Commit

Add ReactTransitionGroup

This introduces <ReactTransitionGroup>, a component that works a lot
like Angular's ng-animate.

The problem we're currently facing is twofold:
1. We don't really have a great convention surrounding CSS transitions
   in React
2. (harder) we can't animate nodes that are leaving the DOM, as their
   nodes are instantly destroyed.

To solve the first issue I've adopted Angular's convention. It's
implemented in ReactTransitionableChild.

The second part is what's tricky. To do this I've implemented three modules:
- ReactTransitionableChild, which can keep its old children around if they
  change to null
- ReactTransitionKeySet, which can look at a prev and next set of child
  keys and merge them in a reasonable way
- ReactTransitionGroup, which combines ReactTransitionableChild and
  ReactTransitionKeySet to keep nodes that are leaving the DOM in the
  DOM until their animations are complete
Browse files
Changed paths7 files
First-parent comparison
A src/addons/transitions/ReactTransitionEvents.js AddedA src/addons/transitions/ReactTransitionGroup.js AddedA src/addons/transitions/ReactTransitionKeySet.js AddedA src/addons/transitions/ReactTransitionableChild.js AddedA src/addons/transitions/__tests__/ReactTransitionGroup-test.js AddedA src/addons/transitions/__tests__/ReactTransitionKeySet-test.js AddedA src/addons/transitions/__tests__/ReactTransitionableChild-test.js Added
Patch

Files changed

Rendering syntax-highlighted changes…