在退出時對 framer-motion "AnimatePresence" animation 做出反應，試圖讓它工作..noob framer-motion 用戶

Question

我的所有動畫都運行良好，除非我單擊一個項目。 沒有 animation 出。 卡項目動畫，但沒有 animation 出來。 我正在嘗試實現 AnimatePresence，不得不承認我已經從周日開始重寫了這個，然后又回來了，並試圖在它上面跟着一些 tuts，但我似乎無法掌握它。 我使用 AnimateSharedLayout 進出路線動畫。 這是跨三個頁面的代碼，試圖在列出的項目到選定的項目之間轉換 animation。

const containerVariants = {
    initial: {
        opacity: 0,
        y: '100vw',
        scale: 2,
    },
    in: {
        opacity: 1,
        y: 0,
        scale: 1,
    },
    out: {
        opacity: 0,
        y: '-100vw',
        scale: 0,
    },
};
const containerTransitions = {
    type: 'tween',
    ease: 'anticipate',
    duration: 2,
};
const containerVariants1 = {
    initial: {
        opacity: 0,
        x: '100vw',
        scale: 0,
    },
    in: {
        opacity: 1,
        x: 0,
        scale: 1,
    },
    out: {
        opacity: 0,
        x: '-100vw',
        scale: 0,
    },
};
const containerTransitions1 = {
    type: 'tween',
    ease: 'anticipate',
    duration: 3,
};

const LGallery = () => {
    return (
        <>
            <AnimatePresence key={Items._id}>
                <motion.div
                    initial='initial'
                    animate='in'
                    key={Items._id}
                    exit='out'
                    variants={containerVariants}
                    transition={containerTransitions}
                    className='container'
                >
                    <h1>filler title</h1>

                    <Row
                        as={motion.div}
                        key={Items._id}
                        initial='initial'
                        animate='in'
                        exit='out'
                        variants={containerVariants1}
                        transition={containerTransitions1}
                        className='card-list '
                    >
                        {Items.map((Items) => (
                            <Col key={Items._id}>
                                <WorkItems Items={Items} />
                            </Col>
                        ))}
                    </Row>
                </motion.div>
            </AnimatePresence>
        </>
    );
};

export default LGallery;

項目列表頁面

const containerVariants = {
    initial: {
        opacity: 0,
        x: '-50vw',
        y: '10vw',
        scale: 0,
    },
    in: {
        opacity: 1,
        x: 0,
        y: 0,
        scale: 1,
    },
    out: {
        opacity: 0,
        x: '10vw',
        y: '-50vw',
        scale: 0,
    },
};
const containerTransitions = {
    type: 'tween',
    ease: 'anticipate',
    duration: 4,
};
const containerVariants1 = {
    initial: {
        opacity: 0,
        y: '60vw',
        scale: 0,
    },
    in: {
        opacity: 1,
        y: 0,
        scale: 1,
    },
    out: {
        opacity: 0,
        y: '-60vw',
        scale: 0,
    },
};
const containerTransitions1 = {
    type: 'tween',
    ease: 'anticipate',
    duration: 5,
};
const containerVariants2 = {
    initial: {
        opacity: 0,
        y: '-60vw',
        scale: 0,
    },
    in: {
        opacity: 1,
        y: 0,
        scale: 1,
    },
    out: {
        opacity: 0,
        y: '60vw',
        scale: 0,
    },
};
const containerTransitions2 = {
    type: 'tween',
    ease: 'anticipate',
    duration: 5,
};

const WorkItems = ({ Items }) => {
    return (
        <>
            <AnimatePresence key={Items._id}>
                <Link to={`/work/${Items._id}`}>
                    <Card
                        as={motion.div}
                        initial='initial'
                        animate='in'
                        exit='out'
                        variants={containerVariants}
                        transition={containerTransitions}
                        className='card-content-container'
                    >
                        <Link to={`/work/${Items._id}`}>
                            <Card.Img
                                className='card-image-container'
                                src={Items.image}
                                // variant='top'
                            />
                        </Link>

                        <Card.Body
                            as={motion.div}
                            key={Items._id}
                            initial='initial'
                            animate='in'
                            exit='out'
                            variants={containerVariants1}
                            transition={containerTransitions1}
                            className='card-content'
                        >
                            <Card.Title
                                as={motion.div}
                                key={Items._id}
                                initial='initial'
                                animate='in'
                                exit='out'
                                variants={containerVariants2}
                                transition={containerTransitions2}
                            >
                                <strong>{Items.title}</strong>
                            </Card.Title>

                            <Card.Text>
                                <motion.div
                                    key={Items._id}
                                    initial='initial'
                                    animate='in'
                                    exit='out'
                                    variants={containerVariants2}
                                    transition={containerTransitions2}
                                    className='card-content'
                                >
                                    {Items.description}
                                </motion.div>
                            </Card.Text>
                        </Card.Body>
                    </Card>
                </Link>
            </AnimatePresence>
        </>
    );
};

export default WorkItems;

單個項目頁面

const containerVariants = {
    initial: {
        opacity: 0,
        y: '-80vw',
        scale: 0,
    },
    in: {
        opacity: 1,
        y: 0,
        scale: 1,
    },
    out: {
        opacity: 0,
        y: '80vw',
        scale: 0,
    },
};
const containerTransitions = {
    type: 'tween',
    ease: 'anticipate',
    duration: 2,
};

const unItems = ({ match }) => {
    const item = Items.find((p) => p._id === match.params.id);
    return (
        <>
            <AnimatePresence>
                <motion.div
                    initial='initial'
                    animate='in'
                    exit='out'
                    variants={containerVariants}
                    transition={containerTransitions}
                    className='portItem'
                >
                    <Image
                        className='image-container'
                        src={item.image}
                        alt={item.title}
                    />
                    <motion.div
                        initial='initial'
                        animate='in'
                        exit='out'
                        variants={containerVariants}
                        transition={containerTransitions}
                        className='portItem'
                    >
                        <ListGroup variant='flush'>
                            <ListGroup.Item>
                                <h3>{item.title}</h3>
                            </ListGroup.Item>
                            <ListGroup.Item>
                                <h3>{item.blurb}</h3>
                            </ListGroup.Item>
                            <ListGroup.Item>
                                <h3>{item.description}</h3>
                            </ListGroup.Item>
                        </ListGroup>
                    </motion.div>

                    <motion.div
                        initial='initial'
                        animate='in'
                        exit='out'
                        variants={containerVariants}
                        transition={containerTransitions}
                        className='portItem'
                    >
                        <ListGroup variant='flush'>
                            <ListGroup.Item>
                                <h3>{item.gitLink}</h3>
                            </ListGroup.Item>
                            <ListGroup.Item>
                                <h3>{item.hostLink}</h3>
                                <h3>{item.phoneQR}</h3>
                            </ListGroup.Item>
                        </ListGroup>
                    </motion.div>

                    <motion.div
                        initial='initial'
                        animate='in'
                        exit='out'
                        variants={containerVariants}
                        transition={containerTransitions}
                        className='portItem'
                    >
                        <ListGroup variant='flush'>
                            <ListGroup.Item>
                                <h3>{item.bIcon}</h3>
                            </ListGroup.Item>
                        </ListGroup>
                        <Link to='/work'>
                            <NButton>Go Back</NButton>
                        </Link>
                    </motion.div>
                </motion.div>
            </AnimatePresence>
        </>
    );
};

export default unItems;

Answer 1

AnimatePresence標簽需要包裝將從 DOM 中刪除的元素。 您不能在條件渲染組件中包含標簽，這看起來就像您在此處所擁有的一樣。 在這種情況下， AnimatePresence標記會從包含組件的頁面中刪除，並且它永遠沒有機會運行退出 animation。

因此，您很可能只需將標簽移動到父組件中。

此外，請確保您嘗試使用AnimatePresence制作動畫的所有組件都具有唯一的key道具。 在其中一些示例中，您似乎錯過了這一點。