Framer Motion：动画结束后如何将显示设置为无？

Question

所以我有这个组件，它应该设置为在动画之后不显示，但我似乎无法在文档中找到它，也找不到有关 thjis 的其他问题。

我通过将其嵌套在另一个 Motion.div 上临时解决了这个问题，并设置延迟以匹配假定的结尾（不透明度为 0）来设置显示动画

编辑：我在这里编辑了部分代码。但无论如何，这只是一个临时解决方案，我仍然想知道是否有更多更好的方法来做到这一点。

    <motion.div
  initial={{display:'flex'}}
  animate={{display:'none'}}
  transition={{delay:3.3}}
  >
    <motion.div 
    initial={{opacity: 1}}
    animate={{opacity: 0,}}
    transition={{delay:3, duration: 0.3,}}

Answer 1

transitionEnd: { display: "none" }

来自文档中这个奇怪命名的部分：

Answer 2

考虑使用

onAnimationComplete

属性和可以保存动画状态的 state 或 ref：

const [completed, setCompleted] = useState<boolean>(false);
...
<motion.div initial={{opacity: 1}}
            animate={{
              opacity: 0,
              display: completed ? "flex" : "none"
            }}
            onAnimationComplete={() => setCompleted(true)}
            transition={{delay:3, duration: 0.3}}/>