css - 如何在没有动画里程表的情况下“重置”css位置？

Question

使用 React Spring 构建类似动画的里程表，到目前为止，我有以下内容：

https://codesandbox.io/s/optimistic-tu-xegev

正如您在沙盒中看到的那样，动画完成了它应该做的事情（从 0 -> 1 -> 2-> ... 9 不断向上平移）。但是，当我达到 9 时，它会以相反的方向向下转换回 0。我正试图摆脱这种“重置”行为。有没有办法回到 0 而不是向下翻译，而是不断向上翻译？

我尝试在 0-9 的第一个实例之后添加其他数字，但最终需要重置。

          return (
            <Spring
              key={`digit-${i}`}
              from={{ translateY: 0 }}
              to={{ translateY: -digit }}
            >
              {(props) => (
                <div className="digit">
                  <div
                    style={{
                      opacity: props.opacity,
                      transform: `translateY(${props.translateY}em)`
                    }}
                  >
                    0 1 2 3 4 5 6 7 8 9 0
                  </div>
                </div>
              )}
            </Spring>
          );