为每个新列表元素反应CSS动画

Question

我目前正在构建一个React应用程序，该应用程序将根据用户输入添加新卡。每张新卡应显示在列表的顶部，并且一次只能显示四张卡。

不幸的是，使用'react-flip-move'的css淡入动画仅在生成第一张卡片时才起作用。首张卡片之后的所有新创建的卡片都不会显示任何动画。

我能确保每张新创建的卡片都收到动画吗？

动态生成卡片的代码：

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>
        );