react-spring，单独为列表项设置动画答案

【问题标题】：react-spring, animate list items individuallyreact-spring，单独为列表项设置动画
【发布时间】：2021-03-21 23:39:06
【问题描述】：

我有一个呈现动态列表的组件。我不想单独延迟每个项目，以便每个项目都相对于前一个项目延迟渲染。我将如何在 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>
  )

【问题讨论】：

你能详细说明一下吗？描述听起来你可以使用大多数可用的钩子来做到这一点，但我们需要确定提供答案

标签： reactjs react-spring

【解决方案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

【讨论】：

太酷了，你可以做到这一点！我会假设您需要调用孩子中的钩子才能获得不同的值。

【解决方案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>
  )

【讨论】：

老兄。这个属性太棒了。非常感谢