3 ms·
There's been a few React animation experiments (including my own: https://github.com/chenglou/react-tween-state https://github.com/chenglou/react-tween-state),
by chenglou 12y ago
There's been a few React animation experiments (including my own: https://github.com/chenglou/react-tween-state https://github.com/chenglou/react-tween-state), but I think there are two main problems here and this library, albeit nice, is mingling the two:
- Actual transition API (e.g. fade in over a period of 1s while moving in from left). Interruptible and composable. My lib and most libs I've seen are geared toward this.
- API for transitioning in/out and moving around. This is the actual hard part that TransitionGroup is trying to tackle. How do you express an "animating out" API (that's also interruptible?) when the item doesn't exist anymore at the next render? Can you stop the component from unmounting midway, and potentially bring it back through an "un-unmounting" API? I haven't seen a library that actually tackles this problem. We can debate about a good API all we want for animation but as long as this problem isn't solved, the whole animation problem isn't imo.
These two are separate issues. Ideally I think you should pull out the velocity part and create a wrapper API around it, and solve transitioning in/out independently.
(I'm actively searching for solutions, so please ping me in #reactjs if you have good ideas. Here are a few messy ones to begin with: https://gist.github.com/chenglou/40b75d820123a9ed53d8 https://gist.github.com/chenglou/40b75d820123a9ed53d8).
- tomaskafka 12y agoThanks, this is important, but definitely out of scope of my tiny component. Stoppable and revertable transitions - does it really need to be a same component (A:child -> B:parent -> A:child)? Wouldn't adding another component instance with a same props suffice (A:child -> B:parent -> C:child)? Then I guess it could be hacked with transitions, but if you require (A -> B -> A), then it seems to me like something that would need some support from higher layers (router?)...
- chenglou 12y agoI don't think it has to do with router; just pure, simple state (router is just another part of a component state anyways). For your example, I think it should support both. You can distinguish an A from another A through a different key or something. If it's the same key, you'd want it to "unmount back".
- deleted 12y ago[deleted]
- jefftchan 12y agoPoint #2 is especially spot on. Right now TransitionGroup clones every child [1] to preserve children for unmounting, but it's incredibly inefficient, especially if you have thousands of elements. Not to mention, as a side-effect, it requires wrappers to preserve refs. [2] [1] https://github.com/facebook/react/blob/master/src/addons/transitions/ReactTransitionGroup.js#L173 https://github.com/facebook/react/blob/master/src/addons/tra... [2] https://github.com/facebook/react/issues/1950 https://github.com/facebook/react/issues/1950
- lobster_johnson 12y agoNaive solution: What if every child had an intermediate parent node, something like: <Transition current={this.state.mode}> <TransitionItem name="map"> <Map .../> </TransitionItem> <TransitionItem name="list"> <List .../> </TransitionItem> </Transition> By making the possible children explicit, you can preserve them in the virtual DOM as long as is needed. The actual child (Map and List) would be mounted/unmounted only as needed.