ReactCSSTransitionGroup not removing element from dom in Android 5.0 Lollipop

Question

On Android 5.0 ReactCSSTransitionGroup appears to work intermittently. At first app launch the ReactCSSTransitionGroup will successfully remove the elements from the dom. Then when the app is killed and re opened ReactCSSTransitionGroup will not remove the elements from the dom

the class name "example-enter example-enter-active" remains in the dom and does not remove the element.

below is the code for the ReactCSSTransitionGroup:

        return (
            <main id="main" className="main_flow_frame">
                <ReactCSSTransitionGroup transitionName="example" className={className} transitionEnter={animate}>
                    {this.state.components}
                </ReactCSSTransitionGroup>
            </main>
        );

below is the CSS:

.transitionA .example-enter {
  -webkit-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0); /* IE 9 */
  transform: translate3d(100%, 0, 0);
  -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transition:         all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  z-index:9999; 
}

.transitionB .example-enter {
  -webkit-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0); /* IE 9 */
  transform: translate3d(-100%, 0, 0);
  -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transition:         all 600ms cubic-bezier(0.19, 1, 0.22, 1); 
}

.example-enter.example-enter-active {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0); /* IE 9 */
  transform: translate3d(0, 0, 0);
}

.example-leave {
  opacity: 1;
  -webkit-transition: opacity .15s ease-in;
  transition: opacity 0.15s ease-in;
 }

.example-leave.example-leave-active {
  opacity: 0.01;
  -webkit-transition: opacity .2s ease-in;
  transition: opacity 0.2s ease-in;
}

Any help would be greatly appreciated. thanks

Answer 1

There's some current issues with the ReactCSSTransitionGroup where the transitionEnd doesn't fire correctly (such as when the tab is out of focus).

I fixed it by using Khan's Academy implementation using a setTimeout. It's a drop-in replacement.

https://github.com/Khan/react-components/blob/master/js/timeout-transition-group.jsx

I'm not sure if it would fix your issue in Android, but it's worth a try.