react-flip-move

Question

我在我的React应用程序中使用react-flip-move。动画根本不起作用。我要做的就是根据我的视频播放器的时间在此列表中显示一些选择项。显示的项目会动态更改，并且项目会堆叠。现在，当有新物品出现时，就不会出现动画了。这是我的代码

 renderItems() {
        return this.state.flipArray.map( (item, i) => {

                if(item.time <= this.props.video_reducer.player_current_time && item.stopTime >= this.props.video_reducer.player_current_time){
                  return  <div key={item.id} className="item active">
                        <div className="top">
                            <div className="time">00:40:15:22 - 00:40:18:22</div>
                            <div className="type">{item.category}</div>
                            <div className="action-icons">
                                <div className="icon active">
                                    <span className="fa fa-check"></span>
                                </div>
                                <div className="icon">
                                    <span className="fa fa-times"></span>
                                </div>
                            </div>
                        </div>
                        <div className="main-box">{item.tagname}</div>
                    </div>
                }

                else if(item.stopTime <= this.props.video_reducer.player_current_time){
                    return  <div key={item.id} className="item">
                        <div className="top">
                            <div className="time">00:40:15:22 - 00:40:18:22</div>
                            <div className="type">{item.category}</div>
                            <div className="action-icons">
                                <div className="icon active">
                                    <span className="fa fa-check"></span>
                                </div>
                                <div className="icon">
                                    <span className="fa fa-times"></span>
                                </div>
                            </div>
                        </div>
                        <div className="main-box">{item.tagname}</div>
                    </div>
                }
        });
    }

在渲染中，我可以翻转

<div className="item-list-container">
                                    <FlipMove>
                                        {this.renderItems()}
                                    </FlipMove>
                                </div>

我可以看到一个跳动的动画。也许发生的太快了，以至于我什至无法弄清楚正在发生什么。