react-spring，分别为列表项设置动画

Question

我有一个呈现动态列表的组件。我不想单独延迟每个项目，因此每个项目都会相对于前一个项目延迟渲染。我将如何在 react-spring?

中实现这一点

目前的代码如下：

  const transitions = useTransition(banks, bank => bank.bic, {
    opacity: 0,
    to: { opacity: 1 }
  })

  return (
    <div>
      {transitions.map(({ item, props, key }) =>
        <animated.div key={key} style={props}>
          <Bank bank={item} />
        </animated.div>
      )}
    </div>
  )

Answer 1

您可以将函数添加到生命周期对象中：

const transitions = useTransition(banks, (bank) => bank.bic, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    config: (item) => ({
      duration: 1000 * item.bic
    })
  });

假设我们可以用bic作为一个递增的值，每个div的持续时间将是递增的。 bic 是否不是用于递增其他解决方案的值可以初始化一个 counter 变量。

  let counter = 0;

  const transitions = useTransition(banks, (bank) => bank.bic, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    config: () => {
      counter++;
      return {
        duration: 1000 * counter
      };
    }
  });

这里有一个例子：https://codesandbox.io/s/animate-list-items-individually-5uri8?file=/src/App.js:571-612

Answer 2

显然我应该更好地阅读文档。有个叫trail的属性。要让每个项目相对于前一个项目以 50 毫秒的延迟进行动画处理，请执行：

const transitions = useTransition(banks, bank => bank.bic, {
    opacity: 0,
    to: { opacity: 1 },
    trail: 50
  })

  return (
    <div>
      {transitions.map(({ item, props, key }) =>
        <animated.div key={key} style={props}>
          <Bank bank={item} />
        </animated.div>
      )}
    </div>
  )

react-spring，分别为列表项设置动画

react-spring, animate list items individually

reactjs

react-spring