framer-motion - AnimatePresence 无法在 Chrome 上运行，但在 Firefox 上运行良好

Question

我正在尝试fadeIn使用framer-motion.

当我单击一个选项卡时，我想显示具有fadeIn效果的选定选项卡的内容，该效果按预期工作，Firefox但不适用于Chrome.

下面是我的代码

1. 动画变体

const TAB_CONTENT_LOADING_VARIANTS = {
  fadeIn: {
    opacity: [0, 1],
    transition: {
      duration: 0.7,
      ease: 'easeIn'
    }
  }
};

2. 选项卡代码

<AnimatePresence>
  {
    tabState.selectedId === 'step-1' && (
      <TabPanel
        as={ motion.span }
        key="step-1"
        animate="fadeIn"
        variants={ TAB_CONTENT_LOADING_VARIANTS }
        { ...tabState }
      >
        ...Contents
      </TabPanel>
    )
  }
  {
    tabState.selectedId === 'step-2' && (
      <TabPanel
        as={ motion.span }
        key="step-2"
        animate="fadeIn"
        variants={ TAB_CONTENT_LOADING_VARIANTS }
        { ...tabState }
      >
        .... Contents
      </TabPanel>
    )
  }
</AnimatePresence>

我检查了控制台日志，但没有找到。

有人可以帮我吗？