dillon1000/react
Commit
Browse files 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
Changed paths7 files
First-parent comparisonsrc/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 AddedPatch
Files changed
Rendering syntax-highlighted changes…