嘗試使用 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>