reactjs - React + Spring - 感觉迟钝

Question

我从 API 下载和显示数据的页面执行 Spring 动画，它们真的很滞后。当有 1-5 件物品（但仍然不稳定）时，这还不错，而当有 20-30 件物品时，这太可怕了。

这是我的动画组件：

const FadeInSpring = ({ children, del }) => {
    return (
        <Spring from={{ opacity: 0, marginTop: 100 }} to={{ opacity: 1, marginTop: 0 }} config={{ delay: del }}>
            {(props) => <animated.div style={props}>{children}</animated.div>}
        </Spring>
    );
};

这是我制作动画的卡片：

<section className="row justify-content-center p-1">
    <article className="col-12 col-md-5">
        <div className="card shadow">
            <div className="card-body">
                <h2 className="card-title">Ingredients:</h2>
                <p>{item.strIngredient1}</p>
            </div>
        </div>
    </article>
</section>;

一切都看起来像这样：

<FadeInSpring>
    <HeaderCard/>
</FadeInSpring>

难道我做错了什么？

编辑：添加链接，以便您自己查看。也许你会注意到这个问题。https://ablaszkiewicz.github.io/react-portfolio/#/recipes

标签： reactjsspringreact-spring