0

我正在尝试在 Framer Motion div 中放置一个非常简单的滚动动画，如下所示：

<motion.div
      animate={{
        translateY: [1000, 0]
      }}
      transition={{ duration: 1 }}
    >
      <BottomSection>            
        <ScrollDiv>
          <Link to="scroll-down" spy={true} smooth={true} offset={50} duration={500}>
            Scroll
          </Link>
        </ScrollDiv>
      </BottomSection>
    </motion.div>
    
    <Space top="_360" bottom="_360" />

    <Element name="scroll-down">
    </Element>
enter code here

但是，如果我将 ScrollDiv 放在motion.div 之外，则滚动可以正常工作。这两个库之间是否存在某种不兼容？我怎样才能解决这个问题？

4

1 回答 1

0

虽然我没有答案，但也许我可以帮助缩小范围。所以我将 react-zoom-pan-pinch 库与 Framer 运动库一起使用，并且还认为两者之间可能存在不兼容。禁用 react-zoom-pan-pinch 后，Framer Motion 仍然表现出相同的行为（在拖动事件期间注册第二个手指触摸时，照片位置抖动——我认为这是 Framer Motion 在两个手指位置之间来回切换在图库中显示照片）。

我不知道这是您所看到的还是直接有帮助，但是删除 ScrollDiv 功能以查看 Framer Motion 是否仍然单独导致问题至少可以让您排除一个库并集中精力。至于成帧器运动，我确实发现了这个错误，看起来还没有一个有效的解决方案

https://github.com/framer/motion/issues/185

于 2021-12-06T19:44:20.897 回答