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

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

1 个答案: