React - Framer 动作：防止触发初始道具

Question

我有一个基本的 CRUD 应用程序，我可以在其中添加和删除列表中的项目，该列表是动画的。这适用于 framer-motion，但我遇到以下问题：

每当我从列表中删除一个项目时，都会调用以下函数：

const handleDeleteFormation = async (id) => {
    await axios({
        method: "DELETE",
        url: `http://localhost:1337/formations/${id}`
    })

    getFormations()
}

如你所见，我在删除后调用getFormations()函数重新渲染更新后的列表：

async function getFormations() {
    const res = await axios.get('http://localhost:1337/formations')
    setFormations(res.data)
    console.log(res.data)
}

这将导致列表重新呈现，这很好。但是......在重新渲染之后，motion.div 的 initial 属性将再次被触发，从而导致视觉冲突。

<AnimatePresence exitBeforeEnter initial={false}>
            {formations && formations.map((formation, index) =>            
                <motion.div
                    key={formation.id}
                    initial={{ opacity: 0, x: -10 }}
                    animate={{ opacity: 1, x: 0 }} 
                    exit={{ opacity: 0, x: -10 }}
                    transition={{ type: "tween", ease: 'easeOut', duration: 0.2 }}
                >
                    ...

我的问题：是否可以防止initial 属性在列表更新后立即触发？

Answer 1

您正在寻找<AnimatePresence initial={false}>。

来自文档：

Suppressing initial animations

通过在 AnimatePresence 上设置 initial={false}，组件出现时 AnimatePresence 首次加载将以其动画状态开始。仅有的 在此初始渲染之后进入的组件将进行动画处理。