android - ReactCSSTransitionGroup没有从Android 5.0 Lollipop中的dom中删除元素

在Android 5.0上，ReactCSSTransitionGroup似乎间歇性地工作。在首次启动应用程序时，ReactCSSTransitionGroup将成功从dom中删除元素。然后，当该应用被终止并重新打开时，ReactCSSTransitionGroup不会从dom中删除元素

类名“ example-enter example-enter-active”保留在dom中，并且不会删除该元素。

以下是ReactCSSTransitionGroup的代码：

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

下面是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;
}

任何帮助将不胜感激。谢谢

最佳答案

ReactCSSTransitionGroup当前存在一些问题，其中transitionEnd不能正确触发（例如，当选项卡未聚焦时）。

我通过使用setTimeout的Khan's Academy实现修复了它。这是一个即插即用的替代品。

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

我不确定是否可以解决您在Android中的问题，但是值得尝试。