如何制作 react-spring <Spring> 重播动画？

Question

我有一个简单的 React 站点，它显示饮料中的饮料-api。它基本上是这样工作的：当用户按下 button 时，query 得到更新，fetchItems 运行s 和项目以这种方式显示

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

目前此动画仅在页面加载时运行一次。我如何在每次搜索时强制它运行？

Answer 1

您应该像这样向 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

如何制作 react-spring <Spring> 重播动画？

How to make react-spring <Spring> replay animation?

reactjs

spring

react-spring