React-Flip анимация, не анимирующая переходы - PullRequest
Новая
       40

React-Flip анимация, не анимирующая переходы

0 голосов
/ 23 октября 2018

Я пытаюсь реализовать ответную реакцию в моем приложении.У меня есть список предметов.Есть div, по которому, когда я нажимаю, последний элемент списка должен занимать верхнюю часть списка.Элементы переставляются, но я не вижу анимации (движения сальто).Вот мой код 

sortRotate() {
        const items = this.state.moderation_list.slice();
        items.unshift(items.pop())

        this.setState({
           moderation_list: items
        });
    }

    renderArticles() {
        return this.state.moderation_list.map( (item, i) => {
            return (
                <div key={item.id} view="list" {...item} className={`item ${item.time <= this.props.video_reducer.player_current_time && this.props.video_reducer.player_current_time <= item.stopTime ? "active":""}`}>
                    <div className="top">
                        <div className="time"> {this.getStandardTimeFormat(item.time)}- {this.getStandardTimeFormat(item.stopTime)}</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>
            );
        });}


    render() {
        return (
            <div>
                <section className="sidebar-flex">
                    <Sidebar/>
                    <div className="main-flex">
                        <VideoSection />
                        <div className="right compliance-fs">
                            <div className="back-btn" onClick={this.toVideoPage.bind(this)}>
                                <span className="fa fa-compress"></span>
                            </div>

                            <div className="heading-tabs">
                                <div className="title">Tagging</div>
                                <div className="tabs" onClick={this.sortRotate.bind(this)}>
                                    <div className="item active" >Compliance</div>
                                </div>
                            </div>
                            <div className="compliance-column">
                                <div className="gradient-box"></div>
                                <div className="item-list-container">
                                    <FlipMove
                                        staggerDurationBy={30}
                                        duration={1000}
                                        enterAnimation={this.state.enterLeaveAnimation}
                                        leaveAnimation={this.state.enterLeaveAnimation}
                                        typeName="ul"
                                    >
                                        {this.renderArticles()}
                                    </FlipMove>
                                </div>
                            </div>

                        </div>
                    </div>

                </section>
            </div>


        );
    }
}

Что я делаю не так?Я добавил уникальный ключ также к каждому div внутри FlipMove.Я не вижу плавного перехода элементов.

...