Framer運動新影片并退出不適用于映射

出于某種原因，我的退出和新影片無法正常作業。我希望每次用戶單擊不同的選單鏈接時都會啟動新影片。我也嘗試過 " animate='visible'" ，我也嘗試過直接放置運動，但它仍然沒有退出或開始新的影片。我正在一起使用 .map 和 framer 運動。有人可以檢查一下。

這是代碼

謝謝

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>

uj5u.com熱心網友回復：

key您不應將回圈索參考作motion.div. 由于索引（因此鍵）將始終相同，因此它不會<AnimatePresence>跟蹤何時添加或洗掉元素以對其進行影片處理。

id而是為每個元素使用一個值，如唯一屬性。這樣，React（和 AnimatePresence）就會知道它何時渲染不同的元素（相對于具有不同資料的相同元素）。這就是觸發退出和進入影片的原因。

這里有一個更徹底的解釋：
react key props and why you should be using index

標籤：动画 下一个.js 成帧运动

上一篇：如何以秒為單位跳到css影片中的特定時間？

下一篇：具有背景顏色的表格單元格上的CSS框陰影影片