3

私のコードは、公式のReact-Router git repoの例と非常によく似ています。

問題を示すコードペンを次に示します。

問題は次のとおりです。属性で指定された時間を待つ代わりにtransitionEnterTimeout、新しい要素がすぐにレンダリングされます。次に、両方の css アニメーション (開始と終了) が同時に実行されます。その後、前の要素が削除されます。

もう少し複雑なセットアップでローカルに同じ問題があります。そのため、問題がどこにあるかを確認するために単純なコードペンを作成しました。

すべてのフレームワーク (react、react-router、react-addons-css-transition-group) の最新バージョンを使用しています。

const App = ({children, location}) => {
    return (
        <ReactCSSTransitionGroup
            component="div"
            transitionName="app"
            transitionEnterTimeout={500}
            transitionLeaveTimeout={500}
        >
            {children && React.cloneElement(children, {
                key: location.pathname,
            })}
        </ReactCSSTransitionGroup>
    );
4

1 に答える 1

3

にはtransitionEnterTimeout、移行を開始するまでの遅延時間は記載されていません。その値は.<name>-enter、ノードからクラスを削除するまでの待機時間を表します。

入力トランジションを遅らせたい場合は、CSS でトランジションに遅延を追加する必要があります。

transition: $type $time $mode $delay;

transitionEnterTimeoutまた、遅延の長さだけ延長する必要があります。

transitionEnterTimeout={1000}
于 2016-12-13T04:46:30.257 に答える