ReactCSSTransitionGroup - add transition lifecycle hooks

[RandScullard]

I'm using ReactCSSTransitionGroup to implement a simple nested expand-collapse UI. Since I'm animating element height and you can't animate to an "auto" value in CSS, I need to get the auto height from the DOM and set it as an explicit height. Then, because of the nesting, when a child expands or collapses, I need to communicate this height change to the child's ancestors. I'm also using the iScroll library to implement scrolling, and when any height transition completes, I need to refresh the iScroll component.

This is easy to implement with CSS transitions and ReactCSSTransitionGroup, but it does require that ReactCSSTransitionGroup notify its child component when transitions begin and end, much the way the low-level ReactTransitionGroup calls lifecycle hooks on its child. I propose that ReactCSSTransitionGroup call the following functions on its child component:

componentWillTransition(animationType)
componentDidTransition(animationType)

where animationType is 'appear', 'enter', or 'leave'.

componentWillTransition is called just before the first CSS transition class (e.g., 'example-enter' or 'example-leave') is added to the element, and componentDidTransition is called just after both CSS transition classes are removed from the element.

I've implemented this with a few simple code changes to ReactCSSTransitionGroupChild.js. Please see pull request #5915. Feedback is welcome!

[jamesplease]

I was about to write up an issue for this exact same API request. My use-case is slightly different, but the API you provided would solve the problem.

The tl;dr use case is an alert system that uses a single component to represent a queue of alerts. The alert uses CSS transitions to animate in and out, but there's no reliable way for me to programatically determine the exact moment that the old alert "disappears" and the new one "appears." This is because component doesn't always unmount and mount again when an alert is queued to immediately appear once the old one is dismissed.

I can provide more details if anyone cares to know more, but I figured I'd throw a comment in support of this suggestion here.

Thanks for opening the issue and the PR, @RandScullard !

[gaearon]

Hi, thanks for feedback. We haven’t done a good job at maintaining TransitionGroup because it isn’t actively used inside Facebook. This is why we recommend that you just fork it and add the needed functionality. We plan to hand it over to the community eventually because we just don’t have a strong enough use case for it, and we don’t have the capacity to review issues and pull requests related to it unless they are trivial. Thanks for understanding!

[jamesplease]

Thanks for the reply, @gaearon ! Would you accept a PR to add a note to the docs saying that it's unsupported? Seems like important info for the community 🙂

[gaearon]

Hmm, I don’t know. Maybe if you find a very good way to phrase it 😉 . If we enumerated everything that it doesn’t support, that would be an infinite list, so it would have to be an extremely common use case for us to specifically draw attention to it.

[jamesplease]

If we enumerated everything that it doesn’t support, that would be an infinite list, so it would have to be an extremely common use case for us to specifically draw attention to it.

Ah, I meant to point out in the docs that Facebook doesn't plan to support the transition group component (i.e.; won't merge PRs to improve it), rather than enumerating the use cases that the component doesn't support. What do ya think?

[gaearon]

Ah. Well.. We do plan to start moving addons out within a month or two. We will definitely update the docs to reflect that.

[cvle]

Checkout this project as an alternative: https://github.com/wikiwi/react-css-transition

[gaearon]

For future reference, the official new home of transition group is here: https://github.com/reactjs/react-transition-group