1

在 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;
}

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

4

1 回答 1

2

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.

于 2015-02-17T00:06:56.090 回答