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

現在、ReactCSSTransitionGroup には、transitionEnd が正しく起動しない問題がいくつかあります (タブがフォーカスされていない場合など)。

setTimeout を使用して Khan's Academy の実装を使用して修正しました。差し替えでの交換です。

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

Android で問題が解決するかどうかはわかりませんが、試してみる価値はあります。

于 2015-02-17T00:06:56.090 に答える