Реагировать + Весна - чувствует себя отсталым - PullRequest
Новая
       19

Реагировать + Весна - чувствует себя отсталым

0 голосов
/ 24 апреля 2020

Моя страница, которая загружает и отображает данные из 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/# / Рецепты

...