React -帧者运动:防止初始道具触发

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}>。

From the docs:

抑制初始动画

通过在AnimatePresence上设置initial={false}，组件在AnimatePresence第一次加载将以它们的动画状态开始。只有在此初始渲染之后进入的组件将在。