我有一个数组:base = [{title:'foo',items: [1,2]},{title:'bar',items:[1,2,3,4]}]
,然后Map这个数组,条件是:
<motion.div variants={container} initial="hidden" animate="visible" exit={'hidden'}>
{base[current].items.map(i =>
<motion.div key={index} variants={item} >
<div{i}</div>
</motion.div>)}
</motion.div>
我需要设置所有子对象的动画,但现在我只设置子对象的动画,这些子对象更多地位于数组中...例如:(在这种情况下)base
中第一个数组的两个子数组可见,如果我更改数组(例如,通过按钮切换),子数组3
和4
会以动画显示,也会隐藏,但子数组1
和2
更改时没有动画,如何解决?
- 动画变体:**
export const container = {
hidden: { opacity: 1, scale: 0 },
visible: {
opacity: 1,
scale: 1,
transition: {
delayChildren: 0.3,
staggerChildren: 0.2
}
}
};
export const item = {
hidden: { y: 20, opacity: 0 },
visible: {
y: 0,
opacity: 1
}
};
1条答案
按热度按时间nmpmafwu1#
要解决这个问题,我们必须用
initial={false} mode={"wait"}
属性的AnimatePresence
Packagemotion.div
,其中Map的项将有不同的键:例如key={i.title}