14
私はReactCSSTransitionGroupを持っています。私はCSSモジュール（および反応ルータからの動的ルーティングを使用していますが、これは期待どおりに動作していると思います）。CSSモジュールを使用したReactCSSTransitionGroup
<ReactCSSTransitionGroup
component="div"
transitionName={transitions}
transitionAppear
transitionAppearTimeout={1000}
transitionEnterTimeout={2000}
transitionLeaveTimeout={2000}
>
{React.cloneElement(this.props.children, {
key: location.pathname,
})}
</ReactCSSTransitionGroup>
appearとleave遷移は完璧に動作 - しかしenter遷移はない - 彼らは単に新しいコンポーネントが入った後に、以前のコンポーネントがフェードアウトして、すぐに表示されます。
（CSSモジュールを使用して）CSS：
.enter {
opacity: 0.01;
}
.enter.enterActive {
opacity: 1;
transition: opacity 500ms ease-in;
}
.leave.leaveActive {
opacity: 0.01;
transition: opacity 2000ms ease-in;
}
.appear {
opacity: 0.1;
transition: opacity 1000ms ease-out;
}
.appearActive {
opacity: 1;
transition: opacity 1000ms ease-out;
}
--- EDIT ---
私は（私だけの小さな一握りを持っている子のルートに期待どおりに動作することを発見しました私のアプリのもの）。子ルートを含むすべてのルートは動的にロードされるため、そのようなケースでは何が動作するのかは分かりませんが、他のルートでは動作しません。
このバイオリンを試してみてください、私は2000年httpsに.enter.enteractiveの時間が変更となりました。 //jsfiddle.net/dcfsyre2/あなたが直面している問題を説明できますか？またはあなたはフィドルを投稿して問題を説明することができます –
私はあなたのCSSスタイルをインポートする場所のためにそれが疑わしいです。できるだけ早く効果を出すために、いくつかのルートモジュールであなたのcssファイルをインポートしてみてください。 –