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