在退出时对 framer-motion "AnimatePresence" animation 做出反应，试图让它工作..noob framer-motion 用户

Question

I have all my animations working good, except when I when I click an item. No animation out. Card item animates in, but no animation out. I'm trying to implement AnimatePresence, have to admit I've rewritten this left from Sunday and back again, and tried to follow a few tuts on it, but I cant seem to grasp it. I have my route animations in and out working with AnimateSharedLayout. Here be the code across three pages trying to have transition animation between items listed to item selected.

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;

list of items page

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;

individual item page

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

The AnimatePresence tags need to wrap the element that will be removed from the DOM. You can't have the tags inside the conditionally rendered component, which looks like what you have here. In that case the AnimatePresence tag gets removed from the page with the component and it never has a chance to run the exit animation.

So you most likely just need to move the tags into the parent component.

Also, make sure all of the components you're trying to animate with AnimatePresence have a unique key prop. It looks like you're missing that in some of these examples.