Как сделать анимацию реакции-весны <Spring>? - PullRequest
Новая
       21

Как сделать анимацию реакции-весны <Spring>?

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

У меня есть простой сайт реакции, который отображает напитки из напитков-API. В основном это работает так: когда пользователь нажимает button, обновляется query, запускается fetchItems и элементы отображаются таким образом 

<Spring from={{ opacity: 0, marginTop: 100 }} to={{ opacity: 1, marginTop: 0 }} config={{ delay: 400 }}>
            {(props) => (
                <div style={props}>
                    {drinks
                        ? drinks.map((drink) => (
                              <DrinkCard
                                  title={drink.strDrink}
                                  image={drink.strDrinkThumb}
                                  alcohol={drink.strAlcoholic}
                                  category={drink.strCategory}
                              />
                          ))
                        : () => (
                              <div className="col-6 col-md-4 p-0">
                                  <h1>NO RESULTS</h1>
                              </div>
                          )}
                </div>
            )}
        </Spring>

На данный момент эта анимация работает только один раз при загрузке страницы. Как заставить его запускаться при каждом поиске?

1 Ответ

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

Вы должны добавить сброс к вашему Spring компоненту так: 

  <Spring
    from={{ opacity: 0, marginTop: 100 }}
    to={{ opacity: 1, marginTop: 0 }}
    config={{ delay: 400 }}
    reset
  >

Вот пример: https://codesandbox.io/s/dank-moon-sq7v9?file= / src / App. js: 348-503

...