Framer 运动新动画并退出不适用于贴图

Question

出于某种原因，我的退出和新动画无法正常工作。我希望每次用户单击不同的菜单时启动新动画 link。我也试过“ animate='visible'” ，我也试过直接放在运动上，但它仍然没有退出或开始新的动画。我同时使用 .map 和 framer motion。有人可以检查一下吗？

这是代码

谢谢

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

您不应将循环索引用作 motion.div 中的 key。由于索引（以及键）将始终相同，因此它不会让 <AnimatePresence> 跟踪何时添加或删除元素以对其进行动画处理。

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

这里有更详尽的解释：
react key props and why you shouldn’t be using index

Framer 运动新动画并退出不适用于贴图

Framer motion new animation and exit not working with mapping

animation

next.js

framer-motion