反応するCSS遷移グループは単一の要素を動かす

Question

私はreact-transition-groupからCSSTransitionGroupを使用していて、いくつかのフィルタを通過するいくつかのオブジェクトを表示するページを持っています（すべてのフィルタは配列の状態を変更します。オブジェクトのタイマーが0になったときに、1つの要素に対してのみ離脱遷移を有効にしたい。

フィルターをかけて休暇を有効にすることなく達成する方法はありますか？

EDIT： 私の配列内の各オブジェクトは、タイマーを含むいくつかの情報を含むオークションです。私は私のdbを検索し、タイマーが終了したときにそれをアクティブにするときに、休暇のアニメーションのアクティブ化を避けたいです。

ホームコンポーネント：

eachAuction(item, i) { 
    return <Auction key={i} index={i} auctionfinished={this.deleteAuction} 
      offerBid={this.offerBid} data={item} /> 
} 

render: 
<div> 
    <CSSTransitionGroup 
    transitionName="auction" 
    transitionAppear={true} 
    transitionAppearTimeout={700} 
    transitionEnterTimeout={700} 
    transitionLeaveTimeout={500}> 
    {this.state.auctionsArr.map(this.eachAuction)} 
    </CSSTransitionGroup> 
</div> 

Answer 1

EDIT：何要素内残しクラスを指定するでしょうか？

eachAuction(item, i) { 
    return <Auction {timer===0 ?? 'className="leaving"'} ... /> 
} 

次に、CSSの効果を指定します。

.auction-leaving div { display: none } 
.auction-leaving div.leaving { /* animation start */ } 
.auction-leaving-active div.leaving { /* animation end*/ }