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

const transitions=useTransition（banks，bank=>bank.bic{
不透明度：0，
至：{opacity:1}
})
返回(
{transitions.map（{item，props，key}）=>
)}
)

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

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是否不是用于增加其他解决方案的值，都可以初始化

计数器
变量

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

下面是一个示例：
您可以将函数添加到生命周期对象中：

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是否不是用于增加其他解决方案的值，都可以初始化
计数器
变量

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

这里有一个例子：
显然，我应该更好地阅读文档。有一个名为
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>
  )

const transitions=useTransition（banks，bank=>bank.bic{
不透明度：0，
到：{opacity:1}，
线索：50
})
返回(
{transitions.map（{item，props，key}）=>
)}
)
显然，我应该把这些文档读得更好。有一个名为
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>
  )

const transitions=useTransition（banks，bank=>bank.bic{
不透明度：0，
到：{opacity:1}，
线索：50
})
返回(
{transitions.map（{item，props，key}）=>
)}
)
你能详细说明一下吗？这个描述听起来好像你可以用大多数可用的钩子来实现，但是我们需要确保提供一个answer@diedu我更新了我的密码你能详细说明吗？这个描述听起来好像你可以用大多数可用的钩子来实现，但是我们需要确保提供一个answer@diedu我更新了我的代码，你可以这么做！我假设你需要在孩子身上调用钩子才能得到不同的值。你能做到这一点真是太酷了！我会假设你需要在孩子身上调用钩子来获得不同的价值观。这房子太棒了。多谢。这房子太棒了。非常感谢