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

显然我应该把文档读得更好些。有一个名为trail的属性。要让每个项目相对于前一个项目有50 ms的延迟，请执行以下操作：

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

Answer 2

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

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