Special lifecycle hooks are not being called when using `ReactCSSTransitionGroup`

[Simone]

When using <ReactCSSTransitionGroup> on a component, the special lifecycle hooks are not being called.

I think it would be useful and nice to know when a transition occurs and which state the transition owns.

I guess ComponentWillEnter, ComponentDidEnter and other special methods were meant to expose those states, but I cannot make it work, unless I use <ReactTransitionGroup>, but this way css classes are not being applied during the transition.

Documentation here (http://facebook.github.io/react/docs/animation.html) states:

"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."

"The example above" is using <ReactCSSTransitionGroup>, so one would expect to have those special hooks being called, but it seems they don't.

[Simone]

I put on a little jsfiddle to demonstrate this: http://jsfiddle.net/kb3gN/1751/

[Kunal Mehta]

I believe those lifecycle methods aren't available for <ReactCSSTransitionGroup>. cc @petehunt to confirm.

[Simone]

Thanks,

so, is there any other way to let a component know when a transition occurs?

I guess Animations need some better explanation in docs.
It's not so clear how to use <ReactTransitionGroup>.

Should animations have to be performed on those special callbacks?
And how about handling transitions timing?

[Kendall Buchanan]

I'm also puzzled here. Why wouldn't the lifecycle events also apply to < ReactCSSTransitionGroup>?

[Simone]

Yes, those methods are called only on ReactTransitionGroup, which is a
lower level component for handling animations programatically.

2014-06-27 18:27 GMT+02:00 Kendall Buchanan [e-mail]:

I'm also puzzled here. Why wouldn't the lifecycle events also apply to <
ReactCSSTransitionGroup>?

—
Reply to this email directly or view it on GitHub
#1368 (comment).

s.carella
[e-mail]

[Sophie Alpert]

ReactCSSTransitionGroup is a higher-level API; if you want to do something more complicated then you can do something using the lower-level ReactTransitionGroup API. It's more or less an implementation detail of ReactCSSTransitionGroup that it uses ReactTransitionGroup under the hood.

[Pete Browne]

I realize this is closed, but I'm struggling with this. It seems like there should at least be a way for the parent component (and/or animated item) to be notified when the animation has been completed.

Take for instance a simple carousel - I'd like to reject inputs (prev/next) while the animation is occurring, but as far as I can tell there's no way to do that without implementing my own copy of ReactCSSTransitionGroup.

It'd be nice if you could do something like:

var Carousel = React.createClass({

  handleAnimationEnd: function() {
    console.log('Animation complete!')
  },

  render: function() {
    return (
      ReactCSSTransitionGroup(
        {
          transitionName: 'slide',
          onAnimationEnd: this.handleAnimationEnd
        },
        this.props.children[this.props.index]
      )
    );
  }

});

[Pete Browne]

Here's what I came up with:

https://gist.github.com/petebrowne/9f17072c3472b21435f5

I couldn't find a way to call lifecycle events on the child components, so instead I'm passing around handlers. @spicyj Is there any reason the following doesn't work?

var CSSTransitionGroupChild = React.createClass({

  componentWillEnter: function (done) {
    if (this.props.children.componentWillEnter) {
      // Even though the child has componentWillEnter defined, this never
      // gets called. This "version" (ReactCompositeComponent?) does not have
      // the method.
      this.props.children.componentWillEnter()
    }
  }

});

[Cameron]

I am also struggling with this. I'm trying to animate a few elements using componentWillEnter, componentDidEnter with TweenMax and the methods don't seem to get called. If ReactCSSTransitionGroup is to model after ng-animate I would be expecting that it should call methods for javascript animation along with adding enter, leave, change classes.

[Simone]

@cameronjroe as far as I understand, all these behaviours will be introduced in one of the next releases of React, as you can check taking a look at the master branch

https://github.com/facebook/react/blob/master/src/addons/transitions/ReactCSSTransitionGroup.js

[Cameron]

I didn't notice but it looks like those methods are exclusively for ReactTransitionGroup, which I hadn't noticed the difference from ReactCSSTransitionGroup.

[Tanner Linsley]

After hunting around the net for quite a long time for a solution to this problem, I'm wondering why the lifecycles methods are not just called in addition to the default css class functionality here. There definitely are times when I need to know at the component level whether it is entering or exiting a transition group. I am really really hoping that I wouldn't be expected to reimplement the reactCSSTransitionGroup class on my own to do this.

Is there any reasoning behind this decision? Are these addons being replaced/deprecated in favor of a more robust API in the near future?

[dan]

These addons are not under any kind of development, and we indeed plan to deprecate them because we just don’t use them much, and their APIs have some inherent problems (e.g. hooks don’t work with stateless functional components anyway).

We recommend looking at React Motion and similar projects instead.

[Dan Van Brunt]

UPDATE - @gaearon
I narrowed down "where" the issue is for us, but not sure of the "why". So if you recall, our issue was that our Page component (Home) was not firing the hooks. Note: Our Page component is wrapped in two compositions WindowState(GSAP(Home)). When I remove WindowState() (a custom one I wrote), everything works fine.

Could this be due to GSAP Enhancer using your attachRefs module? It's pushing the envelope of what I know about React. Is there no way to just simply passthrough all things, including key?

Here is the component:

import React from 'react';
import throttle from 'lodash.throttle';

export var WindowState = ComposedComponent => class extends React.Component {

  constructor(props, context) {
      super(props, context);
      this.state = { 
        window: { height: 0, width: 0 }, 
        document: { height: 0, width: 0 } 
      };
  }

  componentWillMount() {
    this._onResize = function() {
      this.setState({
        window: { height: window.innerHeight, width: window.innerWidth },
        document: { height: document.body.clientHeight, width: document.body.clientWidth }
      })
    }.bind(this);

    this._onResize();
  }

  componentDidMount() {
    this._onResizeThrottled = throttle(this._onResize, 10);
    window.addEventListener("resize", this._onResizeThrottled);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this._onResizeThrottled);
  }

  render() {
      return <ComposedComponent {...this.props} {...this.state} />;
  }
};

Any ideas why GSAP is able to pass through the hooks but my component is not? This component was my first attempt at writing a HOC.

[Sean Corrales]

@gaearon If the plan is still to deprecate the addons, would it be possible to add a deprecation notice to the React docs? The page for reactCSSTransitionGroup still comes up very high in search results and there's no indication that the addon will be deprecated. I just happened to stumble on this issue while trying to get reactCSSTransitionGroup to work for me.

Adding that deprecation notice might save some people some time in the future.

[Vinh]

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

[dan]

This is the official repo for TransitionGroup now: https://github.com/reactjs/react-transition-group