0

我正在使用 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>
4

1 回答 1

0

编辑：如何在元素内指定离开类？

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*/ }
于 2017-07-17T17:09:40.297 回答