响应css过渡组动画单个元素

Question

我使用的是react transition group中的CSSTransitionGroup，我有一个页面显示了几个对象，这些对象都经过一些过滤器(每个过滤器都会改变数组的状态--否则不能这样做)。我希望只在一个元素上激活离开转换(当对象的计时器达到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*/ }