ReactCSSTransitionGroupでアニメーションをどのようにシーケンスしますか？

Question

私はアイコンのグリッドを持っているとしましょう。各行には6つのアイコンがあり、3つの行があります。

私は行間に表示したいコンテンツを持つウィンドウを持っています。現在選択されているアイコンの行の下にウィンドウを表示したい。したがって、最初の行のアイコンが選択されている場合、最初の行の下にウィンドウが表示されます。 2番目の行のアイコンが選択されている場合は、2番目の行の下に表示します。等々。

アイコンを新しい行でクリックするたびに、まずウィンドウを折りたたんで、その新しい行の下に展開したいとします。

今、右の行の下にウィンドウが表示されていますが、わかりません。

ここに私のJSXの関連セクション私はそれ以上と以下のアイコンの数を変更することで、周りのViewerWindowを動かしてる

<Row startFrom={0} numberIcons={ numberTopIcons() } /> 
<ReactCSSTransitionGroup transitionName="sliding-viewer" transitionEnterTimeout={500} transitionLeaveTimeOut={150}> 
    <ViewerWindow key={this.UniqueNumber} /> 
</ReactCSSTransitionGroup> 
<Row startFrom={startFromNumber} numberIcons {numberBottomIcons() /> 

です。

私のCSSはこのように見えます。

sliding-viewer { 
    position: absolute; 
    min-height: 460px; 
} 

.sliding-viewer-enter { 
    min-height: 0; 
    max-height: 0; 
} 

.sliding-viewer-enter.sliding-viewer-enter-active { 
    max-height: 460px; 
    transition: max-height 500ms ease; 
} 

.sliding-viewer-leave { 
    max-height: 460px; 
} 

.sliding-viewer-leave.sliding-viewer-leave-active { 
    max-height: 1px; 
    transition: max-height 150ms ease; 
} 

私はReactCSSTransitionGroupを使用していますが、単一の項目をアニメーション、それは同時に出入りアニメーションを実行し、そのためには明らかに動作しません。

アニメーションをずらして入力する前にLeaveアニメーションを実行する方法はありますか？

Answer 1

申し訳ありませんが、私はこれを私自身で（いつものように）考え出しました。ここであなたがしなければならないことがあります。

<ReactCSSTransitionGroup transitionName="sliding-viewer" 
    transitionEnterTimeout={1200} 
    transitionLeaveTimeOut={500}> 
> 
    <ComponentYouWantToAnimate /> 
</ReactCSSTransitionGroup> 

次に、CSSはこのようです。

.sliding-viewer { 
    position: relative; 
    will-change: max-height, visibility; 
} 

.sliding-viewer-enter { 
    max-height: 0; 
    visibility: hidden; 
    will-change: max-height, visibility; 
} 

.sliding-viewer-enter.sliding-viewer-enter-active { 
    max-height: 447px; 
    visibility: visible; 
    transition: all 700ms ease 500ms; 
} 

.sliding-viewer-leave { 
    max-height: 447px; 
    will-change: max-height, visibility; 
} 

.sliding-viewer-leave.sliding-viewer-leave-active { 
    max-height: 0; 
    transition: all 500ms ease; 
} 

トリックは​​は、それが実行するために自分自身を取るプラス時間transitionLeaveTimeoutまで追加することがあるということです。次に、休暇のアニメーションが機能するのにかかる時間に等しいtrasition-delayを.sliding-viewer-enter.sliding-viewer-enter-activeに追加します。そうすれば、ある遷移が他の遷移の前に起こるようにすることができます。

これは、ReactCSSTransitionGroupを使ってアニメーションをシーケンスする方法の1つですが、最善の方法ではないかもしれません。