如何使用 framer-motion 以编程方式为列表滚动设置动画？

问题描述

#1。问题

我正在尝试从 react-spring 迁移到成帧器运动。我需要以编程方式滚动虚拟化列表。

#2。错误重现

这是一个带有 react-spring 的工作沙箱。该列表通过 scrollTop 属性更新。我尝试通过 useSpring 或 useMotionValue 状态更新它的值，但这些没有逐步更新，它们直接呈现正确的数字，因此没有弹簧滚动。

如何使用 Framer motion？

https://codesandbox.io/s/spring-vs-motion-7ojlx?file=/src/VirtualizedList.tsx:791-1375

#3。重现步骤

基本上，带有弹簧的动画看起来是这样的：

<Spring from={{ top: 0 }} to={{ top: lineHeight * (page.from - 1) }}>
          {(props) => (
            <List
              height={lineHeight * limit}
              rowCount={data.length}
              rowHeight={lineHeight}
              width={1}
              roWrenderer={row}
              containerStyle={{
                width: "100%",maxWidth: "100%"
              }}
              style={{
                width: "100%",overflow: "hidden"
              }}
              scrollTop={props.top}
            />
          )}
        </Spring>

#4。预期行为

点击新页面时平滑滚动。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）