javascript - React spring过渡，实现每个元素的进入渐进式延迟

Question

react-spring 过渡页面上显示的第一个示例是错误的，代码与显示的动画不对应。

我怎样才能达到同样的效果？如何在每个组件的输入和使用 spring 缓动之间获得延迟？

当我尝试此操作时，所有组件都会同时输入。

Use transition example

Answer 1

文档中的这些示例只是草稿，旨在为您提供一些概述。遗憾的是react-spring只提供了更高级的动画而缺乏一些基本的例子。

无论如何。元素之间最基本的延迟可以通过转换的 Trail 属性来实现。

  const transitions = useTransition(items, item => item, {
    from: { transform: "translate3d(0,-40px,0)", display: "inline-block" },
    enter: { transform: "translate3d(0,0px,0)" },
    leave: { transform: "translate3d(0,-40px,0)" },
    trail: 100
  });

此参数只能用于顺序延迟。当从您的转换所基于的数组中添加或删除多个项目时。

https://codesandbox.io/s/new-bird-sztw9

在第一个例子中他们没有使用这个。他们应该稍微交错地向列表中添加和删除项目。我尝试重现它。这是交错添加:

  function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  const handleClick = async () => {
    if (items.length === 0) {
      set([3]);
      await sleep(1000);
      set([2, 3]);
      await sleep(1000);
      set([2, 3, 4]);
      await sleep(1000);
      set([1, 2, 3, 4]);
    } ...

https://codesandbox.io/s/shy-sky-56lrw

这更接近示例。但是，当发生转换的安装/卸载时，会出现轻微的颠簸。

希望对您有所帮助。

作为旁注。我检查了react-spring页面的源代码，他们在作弊。第一个例子是甚至不使用过渡来实现平滑的动画。它使用插值来协调每个数字的运动。这是特殊组件的一些高级用法。

      <RewindSpring>
        {x => (
          <>
            <animated.div
              style={{
                opacity: x.interpolate({range: [0.75, 1.0], output: [0, 1]}),
                transform: x.interpolate({range: [0.75, 1.0], output: [-40, 0], extrapolate: 'clamp'}).interpolate(x => `translate3d(0,${x}px,0)`)
              }}
            >
              1
            </animated.div>
            <animated.div
              style={{
                opacity: x.interpolate({range: [0.25, 0.5], output: [0, 1]}),
                transform: x.interpolate({range: [0.25, 0.5], output: [-40, 0], extrapolate: 'clamp'}).interpolate(x => `translate3d(0,${x}px,0)`)
              }}
            >
              2
            </animated.div>
            <animated.div
              style={{
                opacity: x.interpolate({range: [0.0, 0.25], output: [0, 1]}),
                transform: x.interpolate({range: [0.0, 0.25], output: [-40, 0], extrapolate: 'clamp'}).interpolate(x => `translate3d(0,${x}px,0)`)
              }}
            >
              3
            </animated.div>
            <animated.div
              style={{
                opacity: x.interpolate({range: [0.5, 0.75], output: [0, 1]}),
                transform: x.interpolate({range: [0.5, 0.75], output: [-40, 0], extrapolate: 'clamp'}).interpolate(x => `translate3d(0,${x}px,0)`)
              }}
            >
              4
            </animated.div>
          </>
        )}
      </RewindSpring>