Реагировать на анимацию CSS для каждого нового элемента списка - PullRequest
Новая
       9

Реагировать на анимацию CSS для каждого нового элемента списка

0 голосов
/ 28 августа 2018

В настоящее время я создаю приложение React, которое на основе пользовательского ввода добавит новые карты. Каждая новая карта должна отображаться в верхней части списка, и одновременно должны присутствовать только четыре карты.

К сожалению, анимация постепенного появления css с использованием «response-flip-move» работает только в тот момент, когда генерируется первая карта. Любые вновь созданные карты после первой просто появляются без какой-либо анимации.

Могу ли я убедиться, что каждая вновь созданная карта получает анимацию?

Код для динамической генерации карт: 

if (receivedProps.length > 1) {
            removedfirstElement = receivedProps;
            removedfirstElement = removedfirstElement.slice(1);
            removedfirstElement = removedfirstElement.reverse();
            removedfirstElement = removedfirstElement.slice(0,4); 



            console.log(removedfirstElement);

            //conditionally render cars based on whether a new game is active or not  
            if (this.props.resetGame) {
                cards = (
                    <div>
                        {removedfirstElement.map((userCombo, index) => {
                            return (

                                <ResponseCard
                                    title={userCombo.currentShortName}
                                    correctCombo={
                                        userCombo.currentselectedElementCombo
                                    }
                                    yourCombo={userCombo.currentpressedKey}
                                    key={index}
                                    inputEvaluation={userCombo.correct}
                                />

                            );
                        })}
                    </div>
                );
            }

Код, определяющий внешний вид каждой карты: 

return (
            <FlipMove>
                <div className={classes.position}>
                    <div
                        className={`${materializeCSS["card"]} ${
                            materializeCSS["blue-grey"]
                        } ${materializeCSS["darken-1"]}
                    ${inputEvaluation}`}
                    >
                        <div
                            className={`${materializeCSS["card-content"]} ${
                                materializeCSS["white-text"]
                            } `}
                        >
                            <span className={`${materializeCSS["card-title"]}`}>
                                {"Shortcut: "} {this.props.title}
                            </span>
                            <div className={classes.answer}>
                                {"Correct Combo: "} {individualItems}
                            </div>

                            <div>
                                {"Your combo: "} {individualAnswers}
                            </div>
                        </div>
                    </div>
                </div>
            </FlipMove>
        );
...