成帧器运动新动画并退出不使用贴图

Question

由于某种原因，我的退出和新动画不起作用。我希望每次用户单击不同的菜单链接时都会启动新的动画。我也尝试过“ animate='visible'” ，并且我也尝试过直接进行运动，但它仍然没有退出或开始新的动画。我一起使用 .map 和成帧器运动。有人可以检查一下吗？

这是代码

谢谢

const [forMapping, setForMapping] = useState(wines)

function menuHandler(index, alt) {
    setIsActive(index)
    if (alt === 'wine') {
        setForMapping(wines)
    } else if (alt === 'rakia') {
        setForMapping(rakia)
    }
}


    const variants = {
    visible: i => ({
        y: 0,
        transition: {
            duration: .7
        }
    }),
    hidden: {
        y: '40%'
    }
}


            <AnimatePresence>
                {forMapping.map((item, index) => {
                    const {
                        name,
                        description,
                        alt,
                        imageSrc,
                        price,
                        glass_price,
                        iconSrc,
                        alc
                    } = item;
                    return (
                        <motion.div
                            exit={{y: '100'}}
                            viewport={{once: true}}
                            custom={index}
                            whileInView='visible'
                            initial='hidden'
                            variants={variants}

                            key={index}
                            className='item'>
                            <div className="image">
                                <Image
                                    width={200}
                                    height={400}
                                    objectFit='cover'
                                    src={imageSrc}
                                    alt={alt}/>
                            </div>
                            <div className="info">
                                <div className="info-header">
                                    <header>
                                        {name}
                                    </header>
                                    <p className="price">
                                        {price.toFixed(2)} EUR
                                    </p>
                                </div>
                                <p className="description">
                                    {description}
                                </p>
                                <div className="bottom">
                                    <p>
                                        {alc} %VOL
                                    </p>
                                    <div className='image-price'>
                                        <Image
                                            width={18}
                                            height={20}
                                            objectFit='cover'
                                            src={iconSrc}
                                            alt='wine glass'/>
                                        <p className="black">
                                            {glass_price.toFixed(2)} EUR
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </motion.div>
                    )
                })}
            </AnimatePresence>

Answer 1

您不应将循环索引key用作motion.div. 由于索引（以及键）始终相同，因此它不允许<AnimatePresence>何时添加或删除元素以便为它们设置动画。

\n

相反，为每个元素使用一个类似于唯一id属性的值。这样，React（和 AnimatePresence）就会知道何时渲染不同的元素（相对于具有不同数据的相同元素）。这就是触发退出和进入动画的原因。

\n

这里有一个更彻底的解释：
\n反应关键道具以及为什么你不应该\xe2\x80\x99t 使用索引

\n