私の望む影響：
これは単純に聞こえますが、私はそれを実現するのに苦労しています。これまでのところ、react-routerv4を使用していくつかのルートを設定しており、CSSTransitionGroupルートとコンポーネントに移動を追加するために使用しています。
私が抱えている問題は次のとおりです。
この望ましい効果を達成する方法に関するヒントやリソースは素晴らしいでしょう！
TL; DR：transitionLeaveTimeoutは、アニメーション化されたルート内のアニメーション化されたコンポーネントに適用されていません。
私は解決策を見つけましたが、それは特にエレガントではありません。
ルートによってレンダリングされているすべてのコンポーネントが技術的にしかので簡単に説明すると、問題が発生して表示されます。したがって、私がしなければならなかったのはrender、次のようにルートの関数を使用することでした。
<CSSTransitionGroup
transitionName="test"
transitionAppear={true}
transitionAppearTimeout={1000}
transitionEnterTimeout={1000}
transitionLeaveTimeout={1000}>
<Route exact path="/about" location={this.props.location} key={this.props.location.key} render={({ location }) => (
<CSSTransitionGroup
transitionName="test2"
transitionAppear={true}
transitionAppearTimeout={2000}
transitionEnterTimeout={1000}
transitionLeaveTimeout={1000}>
<AboutBox key={this.props.location.key} />
</CSSTransitionGroup>
)} />
</CSSTransitionGroup>
したがって、ここで起こっていることは次のとおりです。
component=していません。レンダリング関数（render=）を使用してコンポーネント（AboutBox）を呼び出しています。その遷移グループをコンポーネント自体に移動した場合、表示のみが使用可能になります。
これが誰かに役立つことを願っています！
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加