尝试使用 Framer-motion motion.div 为轮播设置动画

Question

我正在尝试使用 Framer-motion motion.div 为轮播动画制作动画，我正在阅读但没有取得太大进展，因为这是我第一次使用动画。 如果有人能指出我正确的方向，我将不胜感激，我基本上有一块 state 链接到我的分页，它将 animation 上的滚动方向设置为“左”或“右”。 我真的只需要想办法在我的motion.div上使用state的右边或左边设置进入和退出animation。 我可以将 state 更改为真正具有任何价值。

我想我感到困惑的是，我目前将表格中的卡片显示为一堆项目，当我分页时，堆栈发生变化，当前显示的卡片更改为数据 object 中的下一组。 我想我不明白如何为一个 div 的入口和出口设置动画作为它的变化？ 我继续阅读有关动画的内容，但我真的很急于完成这项工作。

这是我放在一起的：

  <AnimatePresence exitBeforeEnter>
          <motion.div animate={{ x: { ???? } }}
            style={{ position: 'absolute' }}>
              <HStack spacing={6}>
                {data.objectives.edges.map(e => (
                  <ObjectiveCard
                    objective={e.node}
                    key={e.node.id}
                    completeObjective={completeObjective}
                  />
                ))}
              </HStack>
          </motion.div> 
        </AnimatePresence>