AnimatePresence 和退出动画不会触发

Question

我正在尝试使用 framer motion 制作动画倒计时时钟。

我知道 <AnimatePresence/> 的任何具有唯一键的子项都应该动画进出父项。但是，我就是无法让出口工作。这就是我 injecting/replacing 跨度的方式吗？

<AnimatePresence>
  <div>
    {timeString.split("").map((val, i) => (
      <motion.span
        key={val + i}
        initial={{ y: 50, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        exit={{ y: -50, opacity: 0 }} <--- this doesn't seem to work
        transition={{
          x: { duration: 1, type: "spring", stiffness: 300, damping: 30 },
          opacity: { duration: 0.5 }
        }}
      >
        {val}
      </motion.span>
    ))}
  </div>
</AnimatePresence>

Codesandbox WIP

Documentation

编辑：澄清一下，我试图让数字从底部进入并从顶部离开。目前只能从底部进入，没有退出动画。

Answer 1

经过一些试验，我意识到这是因为 <AnimatePresence> 里面有一个 h1 标签。文档中没有提到它，但看起来 <AnimatePresence> 寻找特定的子组件。在不使用 <motion> 组件的情况下添加 span 或 div 之类的元素会使它出错。

为了让 exit 看起来完美，还有一些不完美之处，但我添加了一个 Codesandbox link，应该解除对你的封锁。

Codesandbox here

P.S。 framer-motion 是一个整洁的库，感谢分享！从来不知道它的存在。

AnimatePresence 和退出动画不会触发

AnimatePresence and exit animation won't fire

javascript

framer-motion