CSSTransitionGroup does not animate if child calls getBoundingClientRect() on componentDidMount

[shaharz]

Possibly not a React bug, but I haven't been able to reproduce in vanilla JS/HTML/CSS so far.

Demo: http://jsfiddle.net/cjqg0y48/1/

I encountered this when I tried to fade in a component that contains react-swipe which uses a plain JS library under the hood. It seems like the call it makes to getBoundingClientRect() magically neutralizes the transition, causing it to have no effect.

One workaround seems to be deferring the getBoundingClientRect() call using setTimeout. (Thanks GreenJello on #reactjs)

[kriscarle]

I'm also seeing this while using https://github.com/akiran/react-slick The width is zero during componentDidMount. I'm using react 0.13.3.

This is the line that is returning zero

var trackWidth = this.refs.track.getDOMNode().getBoundingClientRect().width;

[kriscarle]

The problem in my case was that I had hidden the parent container with display:none and was attempting to fade it in, but display: none makes the widths zero. I'm trying a different approach.

[gaearon]

I’m going to close since we don’t plan any more changes to TransitionGroup in React repo. Instead, it now is maintained by the community, and you can file an issue in the new repository if this is still affecting you. Thanks!