Реагировать css переходная группа анимировать один элемент

Question

Я использую CSSTransitionGroup из response-transition-group, и у меня есть страница, отображающая несколько объектов, которые проходят через некоторые фильтры (каждый фильтр изменяет состояние массива - иначе это сделать нельзя). Я хочу активировать отпуск перехода только на одном элементе (когда таймер объекта достигает 0).

Есть ли способ добиться этого, не активируя отпуск, когда я фильтрую?

РЕДАКТИРОВАТЬ: Каждый объект в моем массиве является аукционом, который содержит несколько информации, включая таймер. я хочу избежать активации анимации выхода, когда я ищу свою базу данных, и активирую ее только по окончании таймера.

домашний компонент:

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

РЕДАКТИРОВАТЬ: Как насчет указать выходной класс внутри элемента?

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*/ }